jquery - 使用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 类的元素时，我需要获取 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>