通过类使用jquery获取父元素

Question

我有以下html结构为例。

<div class="message" data-id="4"> 
     <div> 
      <div class="msg-button"> 
       <span class="sms"></span> 
      </div> 
      <div> 
       <div> 
        <div> 
         <span class="sms"></span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

当我点击与sms类元素我需要得到元素的数据-id属性与message类。

我用jquery做了什么。它不适合我。我怎样才能获得父级元素的类？ 在此先感谢！

$('.sms').click(function(){ 
    var id = $(this).parent('.msg-button').siblings('.message').data("id"); 
    alert(id); 
}) 

Answer 1

您需要使用.closest()。 .parent()只搜索父节点，因为你正在寻找一个匹配的祖先元素使用.closest()

$('.sms').click(function() { 
 
    var id = $(this).closest('.message').data("id"); 
 
    alert(id); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="message" data-id="4"> 
 
    <div> 
 
    <div class="msg-button"> 
 
     <span class="sms"></span> 
 
    </div> 
 
    <div> 
 
     <div> 
 
     <div> 
 
      <span class="sms">sms</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

您需要使用parents()代替parent()

$('.sms').click(function(){ 
    var id = $(this).parents('.message').data("id"); 
    alert(id); 
}); 

Answer 3

使用closest()找到层次结构中的祖先与指定选择

$('.sms').click(function(){ 
    var id = $(this).closest('.message').data("id"); 
    alert(id); 
}); 

Answer 4

。家长（选择器） ParentS将在DOM中进行搜索