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

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

这里有几个问题：

• 元素上的类是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

1. 点击时选择器的拼写错误
2. 使用.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>