跨越元素

完整文件：Traversal Documentation

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <span class="subchild"></span>
        </div>
    </div>
    <div class="surrogateParent1"></div>
    <div class="surrogateParent2"></div>
</div>
 

Parents

通過 .parent()   .parents()   .parentsUntil()   .closest() 來尋找選擇集的父元素。

// 選擇該元素的直接父元素
$( "span.subchild" ).parent(); // 返回元素為：[div.child]
 
// 選擇該元素的所有父元素
// 所有父元素中同給定選擇器匹配的父元素
$( "span.subchild" ).parents( "div.parent" ); // 返回值為：[div.parent]

$( "span.subchild" ).parents(); // 返回值為：[div.child, div.parent, div.grandparent]
 
// 選擇該元素的所有父元素
// 取得該元素的所有父元素，直到選擇器匹配的父元素為止(不包含選擇器匹配的父元素)
$( "span.subchild" ).parentsUntil( "div.grandparent" ); // 返回值為：[div.child, div.parent]

// 選擇最靠近該元素的父元素
// 注意：只有一個父元素會被選擇，並且該元素自身也包含在搜尋中
$( "span.subchild" ).closest( "div" ); // 返回值為：[div.child]
 
$( "div.child" ).closest( "div" ); // 返回值為：[div.child]，方法指定的選擇器也在搜尋範圍中
 

Children

通過 .children()   .find() 來尋找選擇集的子元素。.children() 只返回直接子節點；.find() 遞迴子節點中的子節點...一併返回。

// 返回該元素的直接子元素
// 方法中可以指定需要匹配的選擇器
$( "div.grandparent" ).children( "div" ); // 返回值為：[div.parent, div.surrogateParent1, div.surrogateParent2]

// 返回該元素中同方法引數指定選擇器匹配的所有子元素
$( "div.grandparent" ).find( "div" ); // 返回值為：[div.child, div.parent, div.surrogateParent1, div.surrogateParent2]
 

Siblings

尋找相鄰元素。.prev() 尋找該元素的前一個鄰居；.next() 尋找該元素的後一個鄰居；.siblings() 尋找該元素的所有鄰居。.nextAll() .nextUntil() .prevAll() .prevUntil()

// 選擇該元素的後一個鄰居
$( "div.parent" ).next(); // 返回值為：[div.surrogateParent1]

// 選擇該元素的前一個鄰居
$( "div.parent" ).prev(); // 返回值為：[] 應該該元素沒有前一個鄰居

// 選擇該元素的所有後一個鄰居
$( "div.parent" ).nextAll(); // 返回值為：[div.surrogateParent1, div.surrogateParent2]
// 選擇該元素的所有後一個鄰居中的第一個元素 
$( "div.parent" ).nextAll().first(); // 返回值為：[div.surrogateParent1]
// 選擇該元素的所有後一個鄰居中的最後一個元素
$( "div.parent" ).nextAll().last(); // 返回值為：[div.surrogateParent2]
 
// 返回該元素的所有前一個鄰居
$( "div.surrogateParent2" ).prevAll(); // 返回值為：[div.surrogateParent1, div.parent]
// 返回該元素的所有前一個鄰居中的第一個元素
$( "div.surrogateParent2" ).prevAll().first(); // 返回值為：[div.surrogateParent1]
// 返回該元素的所有前一個鄰居中的最後一個元素
$( "div.surrogateParent2" ).prevAll().last(); // 返回值為：[div.parent]

// 選擇該元素的所有鄰居
$( "div.parent" ).siblings(); // 返回值為：[div.surrogateParent1, div.surrogateParent2]
$( "div.surrogateParent1" ).siblings(); // 返回值為：[div.parent, div.surrogateParent2]