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

Question

I'm trying to traverse up the DOM and grab a certain element (an h2 element), starting at a certain child element (an input element)

Here's my 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>

my js :

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

When a checkbox is clicked, I would like to grab the closest "h2" (criterion_title), and log its HTML. All I'm getting is "undefined".

Answer 1

You are traversing in a wrong way,

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

As per your HTML structure, h2 is not a closest parent element to the check box.

DEMO