在 jQuery 中遍历 DOM 以获取父元素

Question

我正在尝试遍历 DOM 并从某个子元素（输入元素）开始获取某个元素（一个 h2 元素）

这是我的 html ：

<div class="main_selector box_1 active"> 
  <h2 class="criterion_title">Course</h2>
  <button class="toggle_button" data-contents=".item_1"></button>
  <ul class="contents item_1" style="display: block;">
   <li>
     <input class="courseSelectBox" type="checkbox" id="course_1" value>
     <label for="course_1>Brigade S-1<label>
   </li>

我的js：

$(document).ready(function(){
  $('input:checkbox').click(function(){
     console.log($(this).closest("h2").html());
   });
});

单击复选框时，我想获取最接近的“h2”（criterion_title），并记录其 HTML。 我得到的只是“未定义”。

Answer 1

你走错路了

$('input:checkbox').click(function(){
 console.log($(this).closest("ul").siblings("h2").html());
});

根据您的 HTML 结构， h2不是最接近复选框的父元素。

演示