使用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);
})

- lalexa

---

closest() - $(this).closest('.message').data("id"); 意思是：找到最接近的.message元素，并获取其id数据属性。 - Arun P Johny

Answer 1

You need to use .closest(). .parent() will search only the direct parent node, since you are looking for a matching ancestor element use .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>

- Arun P Johny

---

谢谢，它有效了，但我有另一个问题，如果我的span不是父元素带有class message的子元素，我应该使用什么代替closest方法。为了获得更多信息，我将提供这个fiddle链接：http://jsfiddle.net/g2Rxc/93/ - lalexa

Answer 2

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

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

- Mithun Satheesh

Answer 3

使用 closest() 方法来查找符合指定选择器的祖先级元素。

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

- Bhushan Kawadkar

Answer 4

.parents(selector) ParentS 会在 DOM 中向上搜索

- Naramsim