在jQuery中,要获取某个元素的父元素(基于标记名称),可以使用.parents()
或.closest()
方法。这两种方法都可以向上遍历DOM树查找匹配的元素,但有一些区别。
// 获取最近的指定标记名的父元素
var parentElement = $('#childElement').closest('div'); // 获取最近的div父元素
// 获取所有指定标记名的祖先元素
var parentElements = $('#childElement').parents('div'); // 获取所有div祖先元素
// 获取第一个匹配的父元素
var firstParentDiv = $('#childElement').parents('div').first();
var element = $('#childElement');
var targetTagName = 'DIV'; // 要大写
var parent = null;
while (element.length && !parent) {
element = element.parent();
if (element[0] && element[0].tagName === targetTagName) {
parent = element;
}
}
假设有以下HTML结构:
<div class="grandparent">
<section>
<div class="parent">
<p id="target">我要找父级div</p>
</div>
</section>
</div>
var parentDiv = $('#target').closest('div');
console.log(parentDiv.attr('class')); // 输出: "parent"
var allDivParents = $('#target').parents('div');
allDivParents.each(function() {
console.log($(this).attr('class'));
// 依次输出: "parent", "grandparent"
});
.closest()
从当前元素开始检查,如果当前元素匹配选择器,也会返回自身.parents()
是从父元素开始向上查找,不包括当前元素.closest()
通常性能更好.parents()
问题:为什么.closest()找不到我的父元素?
可能原因:
解决方案:
$(document).ready(function() {
var parent = $('#dynamicContent').closest('div');
});