jQuery 遍历 - closest() 方法

实例

本例演示如何通过closest()完成事件委托。当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景:

<!DOCTYPEhtml>

<html>

<head>

<scripttype="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>Clickme!</b></li>

<li>Youcanalso<b>Clickme!</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片段:

<ulid="one"class="level-1">

<liclass="item-i">I</li>

<liid="ii"class="item-ii">II

<ulclass="level-2">

<liclass="item-a">A</li>

<liclass="item-b">B

<ulclass="level-3">

<liclass="item-1">1</li>

<liclass="item-2">2</li>

<liclass="item-3">3</li>

</ul>

</li>

<liclass="item-c">C</li>

</ul>

</li>

<liclass="item-iii">III</li>

</ul>

例子1

假设我们执行一个从项目A开始的对<ul>元素的搜索:

$('li.item-a').closest('ul').css('background-color','red');亲自试一试

这会改变level-2<ul>的颜色,这是因为当向上遍历DOM树时会第一个遇到该元素。

例子2

假设我们搜索的是<li>元素:

$('li.item-a').closest('li').css('background-color','red');亲自试一试

这会改变列表项目A的颜色。在向上遍历DOM树之前,.closest()方法会从li元素本身开始搜索,直到选择器匹配项目A为止。

例子3

我们可以传递DOM元素作为context,在其中搜索最接近的元素。

varlistItemII=document.getElementById('ii');

$('li.item-a').closest('ul',listItemII).css('background-color','red');

$('li.item-a').closest('#one',listItemII).css('background-color','green');

以上代码会改变level-2<ul>的颜色,因为它既是列表项A的第一个<ul>祖先,同时也是列表项II的后代。它不会改变level-1<ul>的颜色,因为它不是listitemII的后代。

**********************************************************

<!DOCTYPEhtml>

<html>

<head>

<scripttype="text/javascript"src="/jquery/jquery.js"></script>

</head>

<body>

<ulid="one"class="level-1">

<liclass="item-i">I</li>

<liid="ii"class="item-ii">II

<ulclass="level-2">

<liclass="item-a">A</li>

<liclass="item-b">B

<ulclass="level-3">

<liclass="item-1">1</li>

<liclass="item-2">2</li>

<liclass="item-3">3</li>

</ul>

</li>

<liclass="item-c">C</li>

</ul>

</li>

<liclass="item-iii">III</li>

</ul>

<script>

$('li.item-a').closest('ul').css('background-color','red');

</script>

</body>

</html>

**********************************************************

相关推荐