单击 div 外部元素父 JQuery 时如何获取子元素中的值

Question

抱歉我的英语不好，例如我有 2 列，点击 div.open-model 时每列都会显示一个模型的值为 h3.title，我使用了 jQuery 但我不能获取值 h3.title 每列

$(document).ready(function() {
  $('.open_modal').click(function(e) {
    var h3title = $(this).find('.parent .title').html();
    console.log('h3title');
    e.preventDefault();

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <h3 class="title">Title1</h3>
</div>
<div class="open-model">Open model</div>

<div class="parent">
  <h3 class="title">Title2</h3>
</div>
<div class="open-model">Open model</div>

Answer 1

尝试prev()。

var h3title = $(this).prev('.parent').find(".title").text();

并在修复其他错误后

$(document).ready(function() {
  $('.open-model').click(function(e) {
    var h3title = $(this).prev('.parent').find(".title").text();
    console.log(h3title);
    e.preventDefault();

  });
});

Answer 2

这里有几个问题：

元素上的 class 是 open-model 所以你选择的 open_modal 不正确
find() 查找子元素，但您要查找的目标是兄弟姐妹的子元素，因此您需要 prev().find() 而不是
h3title 是一个变量，因此在将它作为参数传递给 console.log().

试试这个：

$(document).ready(function() {
  $('.open-model').click(function(e) {
    e.preventDefault();
    
    var h3title = $(this).prev('.parent').find('.title').text();
    console.log(h3title);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <h3 class="title">Title1</h3>
</div>
<div class="open-model">Open model</div>

<div class="parent">
  <h3 class="title">Title2</h3>
</div>
<div class="open-model">Open model</div>

Answer 3

单击时选择器的拼写错误

使用 .prev() 而不是 .find()

$('.open-model').click(function(e) {// fix selector
  var h3title = $(this).prev('.parent').find('.title').html();//use prev()
  console.log(h3title);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <h3 class="title">Title1</h3>
</div>
<div class="open-model">Open model</div>

<div class="parent">
  <h3 class="title">Title2</h3>
</div>
<div class="open-model">Open model</div>

Answer 4

改为

 $(document).ready(function(){
       $('.open-modal').click(function(e){
          e.preventDefault();
          var h3title = $(this).prev().find('.title').text();
          console.log('h3title');
       });
    });

Answer 5

在下面的示例中，我们正在获取前一个 DOM 元素，正如我们在结构中看到的那样，我们想要获取其子元素的内部文本。

$('.open-model').on('click', function(){
  console.log($(this).prev().children().text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    <h3 class="title">Title1</h3>
</div>
<div class="open-model">Open model</div>

<div class="parent">
    <h3 class="title">Title2</h3>
</div>
<div class="open-model">Open model</div>

单击 div 外部元素父 JQuery 时如何获取子元素中的值

How to get the value in element child when click a div outside element parent JQuery

javascript

jquery

children

get

getvalue