jQuery 遍历 - closest() 方法
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>
li { margin: 3px; padding: 3px; background: #EEEEEE; }
li.hilight { background: yellow; }
</style>
</head>
<body>
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
<script>
$(document).bind("click", function( e ) {
$(e.target).closest("li").toggleClass("hilight");
});
</script>
</body>
</html>
定义和用法
closest()
方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
语法
.closest(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含匹配元素的选择器表达式。 |
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象,.closest()
方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素,并用匹配元素构造新的 jQuery 对象。.parents()
和 .closest()
方法类似,它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙,却很重要:
.closest() | .parents() |
---|---|
从当前元素开始 | 从父元素开始 |
沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 | 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。 |
返回包含零个或一个元素的 jQuery 对象 | 返回包含零个、一个或多个元素的 jQuery 对象 |
请看下面的 HTML 片段:
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
例子 1
假设我们执行一个从项目 A 开始的对 <ul>
元素的搜索:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul> </li>
<li class="item-c">C</li>
</ul> </li>
<li class="item-iii">III</li>
</ul>
<script>
$('li.item-a').closest('ul').css('background-color', 'red');
</script>
</body>
</html>
这会改变 level-2 <ul>
的颜色,这是因为当向上遍历 DOM 树时会第一个遇到该元素。
例子 2
假设我们搜索的是 <li>
元素:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul> </li>
<li class="item-c">C</li>
</ul> </li>
<li class="item-iii">III</li>
</ul>
<script>
$('li.item-a').closest('li').css('background-color', 'red');
</script>
</body>
</html>
这会改变列表项目 A 的颜色。在向上遍历 DOM 树之前,.closest()
方法会从 li
元素本身开始搜索,直到选择器匹配项目 A 为止。
例子 3
我们可以传递 DOM 元素作为 context,在其中搜索最接近的元素。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul> </li>
<li class="item-c">C</li>
</ul> </li>
<li class="item-iii">III</li>
</ul>
<script>
var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');
</script>
</body>
</html>
以上代码会改变 level-2 <ul>
的颜色,因为它既是列表项 A 的第一个 <ul>
祖先,同时也是列表项 II 的后代。它不会改变 level-1
-
的颜色,因为它不是 list item II 的后代。
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 src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">div (曾祖父)
<ul>ul (祖父)
<li>li (直接父)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (祖父)
<p>p (直接父)
<span>span</span>
</p>
</div>
</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 src="/jquery/jquery-1.11.1.min.js">
</script>
<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 (直接父)
<span>span</span>
</li>
</ul>
</div>
</body>
<!-- 最外围的红色边框,在 body 元素之前,是 html 元素(也是祖先)。 -->
</html>
您也可以使用可选参数来过滤对祖先元素的搜索。
下面的例子返回所有 <span>
元素的所有祖先,并且它是 <ul>
元素:
实例
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("span").parents("ul").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖父)
<div style="width:500px;">div (曾祖父)
<ul>ul (祖父)
<li>li (直接父)
<span>span</span>
</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 src="/jquery/jquery-1.11.1.min.js">
</script>
<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 (直接父)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
jquery DOM 父节点、祖先节点、子节点、子孙节点
一、获取父节点、祖先节点:
-
parents([selector])
本方法用于选择给定 jQuery 对象中包含的 DOM 元素或者 DOM 元素集的祖先节点,并将这些节点包装成 jQuery 对象返回,返回的节点集是以从里到外的顺序排序的。同时,本方法还接受一个字符串选择器,用于从返回的节点集中筛选符合选择器的子元素集。 -
parent([selector])
本方法用于选择给定 jQuery 对象中包含的 DOM 元素或者 DOM 元素集的父节点。它和 parents() 不同的是,它只向上搜索一层,而 parents() 会搜索整个 DOM 树。本方法也可以接受一个字符串选择器,用于筛选返回的元素。
有人可能会问:一个 DOM 元素的父元素不是只有一个么,为什么还要一个 selector 选择器进行筛选呢?其实一个 jQuery 对象可能包含有很多个 DOM 元素,例如$('a').parent()
就是选择所有<a>
标签的父元素,这样返回的就是一个元素集,所以可以进行筛选。 -
closest(selector)
本方法用于向上遍历 jQuery 对象中包含的 DOM 元素或者 DOM 元素集的祖先节点,直到找到符合 selector 选择器的节点为止。
二、获取子节点、子孙节点:
-
chidren([selector])
仅仅获取的是下级节点,不包括孙子节点,可用选择器选取。 -
find([selector])
搜索所有段落中的后代,可用选择器获取。
jquery获取父元素及祖先元素
parent
是找当前元素的第一个父节点,parents
是找当前元素的所有父节点
先说一下parent和parents的区别
从字面上不难看出
parent
是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents
则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的
表达式进行筛选。
可以看出parent
的取值很明确,就是当前元素的父元素;parents
则是当前元素的祖先元素。下面列出例子
说明:
<div id='div1'>
<div id='div2'><p></p></div>
<div id='div3' class='a'><p></p></div>
<div id='div4'><p></p></div>
</div>
$('p').parent()
取到的是div2,div3,div4
$('p').parent('.a')
取到的是div3
$('p').parent().parent()
取到的是div1
,这点比较奇特;不过Jquery对象本身的特点决定了这是可行的
。
$('p').parents()
取到的是div1,div2,div3,div4
$('p').parents('.a')
取到的是div3
parent(exp)
用法:取得一个包含着所有匹配元素的唯一父元素的元素集合。
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function(){
alert($(this).parent().next().html());
});
});
</script>