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的元素时，我需要获取带有类message的元素的data-id属性。

我使用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中搜索

使用jquery逐个类获取父元素

4 个答案: