jQuery 遍历 - 祖先

jQuery

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入/淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery Chaining jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 遍历 - 祖先 jQuery 遍历 - 后代 jQuery 遍历 - 同胞 jQuery 遍历- 过滤 jQuery - AJAX 简介 jQuery - AJAX load() jQuery - AJAX get()/post() 方法 jQuery - noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Accordion jQuery Autocomplete jQuery Message jQuery 密码验证 jQuery Prettydate jQuery Tooltip jQuery Treeview

jQuery 遍历 - 祖先

祖先是父、祖父或曾祖父等等。

通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。

向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

parent()
parents()
parentsUntil()

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个 <span> 元素的的直接父元素：

<!DOCTYPE html>

<html>

<head>

<style>

.ancestors *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

</script>

$(document).ready(function(){

$("span").parent().css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body>

<div style="width:500px;">div (曾祖父元素)

<ul>ul (祖父元素)

<li>li (父元素)

</li>

</ul>

</div>

<div style="width:500px;">div (祖父元素)

<p>p (父元素)

</p>

</div>

</body>

</html>

jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

下面的例子返回所有 <span> 元素的所有祖先：

<!DOCTYPE html>

<html>

<head>

<style>

.ancestors *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

</script>

$(document).ready(function(){

$("span").parents().css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body class="ancestors">body (曾曾祖父元素)

<div style="width:500px;">div (曾祖父元素)

<ul>ul (祖父元素)

<li>li (父元素)

</li>

</ul>

</div>

</body>

</html>

您也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：

<!DOCTYPE html>

<html>

<head>

<style>

.ancestors *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

</script>

$(document).ready(function(){

$("span").parents("ul").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body class="ancestors">body (great-great-grandparent)

<div style="width:500px;">div (great-grandparent)

<ul>ul (grandparent)

<li>li (direct parent)

</li>

</ul>

</div>

</body>

</html>

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

<!DOCTYPE html>

<html>

<head>

<style>

.ancestors *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

</script>

$(document).ready(function(){

$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body class="ancestors"> body (曾曾祖父元素)

<div style="width:500px;">div (曾祖父元素)

<ul>ul (祖父元素)

<li>li (父元素)

</li>

</ul>

</div>

</body>

</html>

上一篇:jQuery 遍历

下一篇:jQuery 遍历 - 后代

我要发贴

jQuery