查找第一个顶部最近的<h3>元素

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>

仅在旁注，切勿复制ids。

Answer 2

在jQuery中使用.prev()。

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

Answer 3

带有 .prev()的其他答案，但这是获得它的另一种方法：

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

<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>