jQuery 遍历 - closest() 方法
崔博伦一路有你 2012-08-14
实例
本例演示如何通过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>
**********************************************************
