javascript - How to get [data-value] from parent element after click -

my code structure looks this:

<div id="calendar" data-calendar="0">     <div class="box">         <div class="head">             <div class="nav_prev" data-calendar-nav="prev">             <div class="nav_prev" data-calendar-nav="prev">         </div>     </div> </div> 

and don't know how after click on .nav_prev or .nav_next data-calendar value (in example 0 ) #calendar. know should use .parent() cant figure out how this.

for have js code:

$(document).on("click","#calendar .head .nav_prev, #calendar .head .nav_next",function(){     if( $(this).attr('data-calendar-nav') == 'prev')     {         console.log('prev');     }     if( $(this).attr('data-calendar-nav') == 'next')     {         console.log('next');     } }) 

use closest() parent , data() data attribute:

$(document).on("click","#calendar .head .nav_prev, #calendar .head .nav_next",function(){     if($(this).data('calendar-nav') == 'prev') {         console.log('prev');         alert($(this).closest('#calendar').data('calendar'));     }     if($(this).data('calendar-nav') == 'next') {         console.log('next');         alert($(this).closest('#calendar').data('calendar'));         } });