Question

我需要从内部复选框中选择<h3>元素。我无法找到任何jquery选择器来执行此操作。我怎么能这样做？

<h3 id="row_3">Date</h3>
<!-- 2 second-->
<div class='container'>
   <p>  
        <input type="checkbox" checked class="mathOperator"  />              
   </p>
</div>

Answer 1

您需要结合使用.closest()和.prev()：

$(this).closest(".container").prev("h3");   // h3

如果你有id：

，不确定为什么要这样做

$("#row_3");                                // h3

<强>段

$(function () {
  $(".mathOperator").click(function () {
    console.log($(this).closest(".container").prev("h3").text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 id="row_3">Date</h3>
<!-- 2 second-->
<div class='container'>
  <p>  
    <input type="checkbox" checked class="mathOperator" />              
  </p>
</div>

请注意，不要复制id。

Answer 2

在jquery中使用.prev()。

$('.mathOperator').closest('.container').prev('h3');

Answer 3

使用.prev()作为其他答案已有，但这是获得它的另一种方式：

＆＃13;

$(function() {
  var el = $(".container:has(.mathOperator:checked)").prev("h3")[0];
  console.log(el);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 id="row_3">Date</h3>
<!-- 2 second-->
<div class='container'>
  <p>
    <input type="checkbox" checked class="mathOperator" />
  </p>
</div>

＆＃13;

找到第一个最近的<h3>元素

3 个答案: