廢話不多說，先來個總結，然后下面是demo
一. 同級節點之間的檢索(檢索深度N=0)
next()是在兄弟節點中，往后匹配;
prev()是在兄弟節點中，往前匹配。
二. 父級/子級節點的檢索(檢索深度N=1)
children()是在子節點中，往后匹配。
parent()是在父節點中，往前匹配。
ps：請注意了---子節點和父節點都是相鄰的，深度為1的節點，也就是標題提到的檢索深度為1
三. 后代節點的檢索（檢索深度N>=1）
find()檢索的是子代元素和后代元素，不會檢索兄弟節點。
parents() 檢索的是祖輩元素(包括父元素)的集合。
closest()檢索的是最近的祖輩元素(一個)
ps：當往上級檢索節點的時候，推薦使用closet，效率更高!
四. demo
HTML代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> </head> <body> <div class="out" id="t1"> <div class="level1" id="t2"> <span class="title1" id="t3"></span><span class="title2" id="t4"></span> </div> <ul class="menu" id="t6"> <li class="item1" id="t7"></li> <span class="item2" id="t8"></span> <li class="item3" id="t9"></li> </ul> <div class="level1" id="t10"> <span class="title1" id="t11"></span><span class="title2" id="t12"></span> </div> <ul class="menu" id="t14"> <span class="item1" id="t15"></span> <li class="item2" id="t16"></li> <span class="item3" id="t17"></span> </ul> </div> </body> </html>
JS測試代碼如下：
<script type="text/javascript" src="../js/lib/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function () {
testNext();
testChildren();
testFind();
testPre();
testParent();
});
//測試next。
function testNext() {
var $result = $(".level1").next("ul");
console.info(getTagsInfo($result)); //結果是：["UL#t6", "UL#t14"]
}
//測試Children
function testChildren() {
var $result = $(".level1").children("span");
console.info(getTagsInfo($result));//結果是：["SPAN#t3", "SPAN#t4", "SPAN#t11", "SPAN#t12"]
}
//測試Find
function testFind() {
var $result = $(".out").find("span");
console.info(getTagsInfo($result));//結果是： ["SPAN#t3", "SPAN#t4", "SPAN#t8", "SPAN#t11", "SPAN#t12", "SPAN#t15", "SPAN#t17"]
}
//pre是next的方面，檢索的是同級元素。
function testPre() {
var $result = $("#t12").prev("span");
console.info(getTagsInfo($result));//結果是：["SPAN#t11"]
}
//parent是和children相對的，檢索的上一級別的父元素
function testParent() {
var $result = $(".title1").parent("div");
console.info(getTagsInfo($result));//結果是：["DIV#t2", "DIV#t10"]
}
//輸出匹配到的元素的id
function getTagsInfo($doms) {
return $doms.map(function () {
return this.nodeName + "#" + this.id;
}).get();
}
</script>
相關源代碼：http://yunpan.cn/c3eL2PdJiqMZ3 訪問密碼 47eb