javascript - Traversing up the DOM in jQuery to grab a parent element -

i'm trying traverse dom , grab element (an h2 element), starting @ child element (an input element)

here's 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 checkbox clicked, grab closest "h2" (criterion_title), , log html. i'm getting "undefined".

you traversing in wrong way,

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

as per html structure, h2 not closest parent element check box.

demo