jQuery - 使用要点 - 跨越元素

跨越元素

完整文档：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]