通過類使用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中進行搜索