如何在jQuery中单击事件上的第一个锚点读取数据属性值

Question

我正在尝试使用jQuery访问数据属性，但无法读取值。

这是我的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> 

在单击红色边框文本时，我想从蓝色边框文本获取数据属性值，即data-ajax-coments-res，因此您可以指导如何读取数据属性值。

Answer 1

我建议您使用.closest()和.siblings() 。
（我不喜欢.parents()方法。）

您的代码.closest('.leaveCommentDv')无法正常工作，因为.leaveCommentDv不是祖先。 我将其修改为正确的祖先.remainingTimeDv ，并添加了.siblings('.leaveCommentDv')以便您的find()可以访问正确的元素。

这是一个工作片段：

 $(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> 

请注意，我也添加了蓝色！ :)

希望对您有所帮助。

Answer 2

closest不会在这里工作。 使用find代替。 也使用data提取数据而不是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

这将起作用：

 $(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> 

您原来的作品不起作用的原因是因为closest()并没有您所认为的那样。 它找不到与选择内容最接近的元素或子元素，而是找到最接近的祖先 ，并且“ cursorDefault”元素没有与“ leaveCommentDv”相匹配的祖先。 检查https://api.jquery.com/closest/以获取该方法的描述。