How to read data attribute value of first anchor on click event in jQuery

Question

I am trying to access data attributes using jQuery but not able read value.

Here is my HTML:

 $(function() { $(document.body).on('click', '.remainingTimeDv .font-sm .cursorDefault', function(event) { var messageId = $(this).parents().closest('.leaveCommentDv').find('a:first').attr('data-ajax-coments-res'); alert(messageId); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="messageContentRow"> <a href="javascript:;" class="userName hover-no-underline">Erick Venere</a> <p></p> <p>Vel ab eius consequat Consequatur Labore sunt<br></p> <p></p> <div class="remainingTimeDv"> <ul> <li class="font-sm">22 minutes ago <span class="cursorDefault" title="Emma Caldarera">(to Multiple Staff)</span> </li> <li class="brodcastText "></li> </ul> </div> <div class="leaveCommentDv"> <ul> <li> <a href="javascript:;" class="leaveComment" data-ajax-coments-res="26" data-parent-message-id="0"><i class="chatGrey"></i>Leave a Comment</a> </li> <li> <a href="javascript:;" class="dig dig26" data-message-id="26" data-parent-message-id="0"><i class="thumbGrey"></i>Dig it</a> </li> </ul> </div> <div id="ajaxComentsRes26" class="ajaxComentsRes"></div> </div> 

On click of red border text, I want to get data attribute value from blue border text which is data-ajax-coments-res so can you please guide how to read data attribute value.

Answer 1

I suggest you to use .closest() and .siblings() .
(I am not fond of the .parents() method.)

Your code .closest('.leaveCommentDv') wasn't working because .leaveCommentDv is not an ancestor. I modified it to a correct ancestor .remainingTimeDv , and added .siblings('.leaveCommentDv') so that your find() can access the correct element.

Here is a working snippet:

 $(document.body).on('click', '.remainingTimeDv .font-sm .cursorDefault', function(event) { var messageId = $(this).closest('.remainingTimeDv').siblings('.leaveCommentDv').find('a:first').attr('data-ajax-coments-res'); alert(messageId); }); 

 .remainingTimeDv .font-sm .cursorDefault{ border: 1px solid blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="messageContentRow"> <a href="javascript:;" class="userName hover-no-underline">Erick Venere</a> <p></p> <p>Vel ab eius consequat Consequatur Labore sunt<br></p> <p></p> <div class="remainingTimeDv"> <ul> <li class="font-sm">22 minutes ago <span class="cursorDefault" title="Emma Caldarera">(to Multiple Staff)</span> </li> <li class="brodcastText "></li> </ul> </div> <div class="leaveCommentDv"> <ul> <li> <a href="javascript:;" class="leaveComment" data-ajax-coments-res="26" data-parent-message-id="0"><i class="chatGrey"></i>Leave a Comment</a> </li> <li> <a href="javascript:;" class="dig dig26" data-message-id="26" data-parent-message-id="0"><i class="thumbGrey"></i>Dig it</a> </li> </ul> </div> <div id="ajaxComentsRes26" class="ajaxComentsRes"></div> </div> 

Note that I added the blue color, too! :)

I hope it helps.

Answer 2

The closest wont work here. Use find instead. also use data to extract data instead of attr

 $(document.body).on('click', '.remainingTimeDv .font-sm .cursorDefault', function(event) { var messageId = $(this).parents().find('.leaveCommentDv').find('a:first').data('ajax-coments-res'); alert(messageId); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="messageContentRow"> <a href="javascript:;" class="userName hover-no-underline">Erick Venere</a> <p></p> <p>Vel ab eius consequat Consequatur Labore sunt<br></p> <p></p> <div class="remainingTimeDv"> <ul> <li class="font-sm">22 minutes ago <span class="cursorDefault" title="Emma Caldarera">(to Multiple Staff)</span> </li> <li class="brodcastText "></li> </ul> </div> <div class="leaveCommentDv"> <ul> <li> <a href="javascript:;" class="leaveComment" data-ajax-coments-res="26" data-parent-message-id="0"><i class="chatGrey"></i>Leave a Comment</a> </li> <li> <a href="javascript:;" class="dig dig26" data-message-id="26" data-parent-message-id="0"><i class="thumbGrey"></i>Dig it</a> </li> </ul> </div> <div id="ajaxComentsRes26" class="ajaxComentsRes"></div> </div> 

Answer 3

This will work:

 $(function() { $(document.body).on('click', '.remainingTimeDv .font-sm .cursorDefault', function(event) { var messageId = $(this).parents().find('.leaveCommentDv:first a:first').data('ajax-coments-res'); alert(messageId); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="messageContentRow"> <a href="javascript:;" class="userName hover-no-underline">Erick Venere</a> <p></p> <p>Vel ab eius consequat Consequatur Labore sunt<br></p> <p></p> <div class="remainingTimeDv"> <ul> <li class="font-sm">22 minutes ago <span class="cursorDefault" title="Emma Caldarera">(to Multiple Staff)</span> </li> <li class="brodcastText "></li> </ul> </div> <div class="leaveCommentDv"> <ul> <li> <a href="javascript:;" class="leaveComment" data-ajax-coments-res="26" data-parent-message-id="0"><i class="chatGrey"></i>Leave a Comment</a> </li> <li> <a href="javascript:;" class="dig dig26" data-message-id="26" data-parent-message-id="0"><i class="thumbGrey"></i>Dig it</a> </li> </ul> </div> <div id="ajaxComentsRes26" class="ajaxComentsRes"></div> </div> 

The reason your original did not work is because closest() doesn't do what you appeared to think it does. It doesn't find the nearest element or child element to the selection, it finds the nearest ancestor , and the "cursorDefault" element doesn't have any ancestors matching "leaveCommentDv". Check https://api.jquery.com/closest/ for a description of that method.