如何使用jQuery选择第一个父DIV？

Question

var classes = $(this).attr('class').split(' '); // this gets the current element classes

var classes = $(this).parent().attr('class').split(' '); // this gets the parent classes.

上述情况中的父元素是一个锚点。

如果我想获取$(this)的第一个父级DIV，代码应该是什么样子？

var classes = $(this).div:parent().attr('class').split(' '); // just a quick try.

* 我想要获取$(this)的第一个父级DIV的类名。

谢谢。

- Adam

Answer 1

使用.closest()方法向上遍历DOM树，直到找到指定的选择器。

var classes = $(this).parent().closest('div').attr('class').split(' '); // this gets the parent classes.

- Shef

---

parents("div") 是用来遍历并返回所有的父级 div 的，你应该在它后面加上 .eq(0)，以确保它只返回你想要的那个。 - meo

记住，为了性能最好使用.parents('div').eq(0) -- 先使用纯CSS选择器，然后再用jQuery过滤到第一个元素，这样会略微提高性能 -- 参见jQuery :eq文档的“附加说明”部分。 - Noah Whitmore

@NoahWhitmore 已修复。使用 closest() 方法，因此它不会返回所有父级元素，而是只返回 div 元素的父级元素。 - Shef

Answer 2

使用.closest()方法，它可以获取第一个符合给定选择器'div'的祖先元素：

var classes = $(this).closest('div').attr('class').split(' ');

编辑：

如@Shef所指出的那样，.closest()如果当前元素恰好是一个DIV，则会返回该当前元素。为了考虑到这一点，首先使用.parent()：

var classes = $(this).parent().closest('div').attr('class').split(' ');

- Tatu Ulmanen

---

如果 $(this) 是一个 DIV 元素，.closest() 会匹配它自己。 - Shef

@Shef，这对我来说是新信息，谢谢。我已经编辑了我的答案以反映这一点。 - Tatu Ulmanen

你可以简单地使用.parents("div").eq(0)。该代码的作用是选取当前元素最近的父级div元素。 - meo

Answer 3

如果父元素是一个 div，那么这段代码获取它的 class。

var div = $(this).parent("div");
var _class = div.attr("class");

- Esben

---

@meo 这就是问题所问的。 - Daniel West

Answer 4

最好的两个选择是：

$(this).parent("div:first")

$(this).parent().closest('div')

当然你可以通过以下方式找到class属性：

$(this).parent("div:first").attr("class")

$(this).parent().closest('div').attr("class")

并且针对您

$(this).parent("div:first").attr("class").split(' ')
$(this).parent().closest('div').attr("class").split(' ')

- Junaid Masood

Answer 5

保持简单！

var classes = $(this).parent('div').attr('class');

- Daniel West