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

Posted 2023-03-06

【中文标题】如何使用 jQuery 选择第一个父 DIV？

【英文标题】：How to select first parent DIV using jQuery?

【发布时间】：2011-10-28 16:31:16

【问题描述】：

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

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

上述情况的父母是ankor。

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

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

* 基本上我想得到 $(this) 的第一个父 DIV 的类。

谢谢

【参考方案1】：

如果它是一个 div，这将获取父级。然后它就上课了。

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

【讨论】：

@meo 这就是问题所在。

【参考方案2】：

使用.closest()，获取第一个匹配给定选择器'div'的祖先元素：

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

编辑：

正如@Shef 所说，.closest() 将返回当前元素，如果它恰好也是一个 DIV。考虑到这一点，请先使用.parent()：

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

如果$(this) 是一个DIV 元素，

.closest() 将匹配自身。

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

你可以简单地使用.parents("div").eq(0)

【参考方案3】：

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

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

【讨论】：

parents("div") 正在遍历并返回所有父 div，你应该在它之后使用 .eq(0) 以确保它只返回你想要的那个

请记住，使用.parents('div').eq(0) 会更好地提高性能——使用 jQuery 后跟的钱包 CSS 选择器来过滤到第一个元素会给你带来轻微的性能提升——请参阅“附加说明” ' 部分在jQuery :eq doc

@NoahWhitmore 已修复。使用了closest()，所以它不会返回所有父母，而是div父母。

【参考方案4】：

保持简单！

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

【参考方案5】：

两个最好的选择是

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

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

当然你也可以找到类 attr by

$(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(' ')