跨越元素
<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]