<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<title></title>
</head>
<body>
文档遍历处理
<button id="test1">文档筛选eq</button>
<button id="test2">文档筛选filter</button>
<button id="test3">文档筛选not</button>
<button id="test4">树遍历children</button>
<button id="test5">树遍历closest</button>
<button id="test6">树遍历find</button>
<ul class="level-1">
<li class="item-i">I</li>
<li 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 type="text/javascript">
$("#test1").click(function(event) {
$('li').eq(2).css('background-color', 'red');
})
$("#test2").click(function(event) {
$('li').filter(':even').css('background-color', 'blue');
})
$("#test3").click(function(event) {
$('li').not(':even').css('background-color', 'red');
})
$("#test4").click(function(event) {
$('ul.level-2').children().css('background-color', 'yellow');
})
$("#test5").click(function(event) {
$('li.item-a').closest('ul')
.css('background-color', 'red');
})
$("#test6").click(function(event) {
$('li.item-ii').find('li').css('background-color', 'blue');
})
</script>
</body>
</html>
查找 <li class="item-a"> 的祖先元素，直到 <ul class="level-1">，并将它们设置为红色背景。同时，找到 <li class="item-2"> 的所有类名为 "yes" 的祖先元素，直到 <ul class="level-1">，然户为它们设置蓝色边框：
$("li.item-a").parentsUntil(".level-1")
.css("background-color", "red");
$("li.item-2").parentsUntil( $("ul.level-1"), ".yes" )
.css("border", "3px solid blue");