【JQuery】----遍历

遍历

• 祖先

节点遍历是从当前元素向上遍历，直至文档根元素来查找 DOM 元素；

祖先是父、祖父、曾祖父，依此类推。

// span的直接父节点
$("span").parent().css({"border": "2px solid pink"})
// span的所有祖先节点
$("span").parents().css({"border": "2px solid pink"})
// span的 所有祖先节点选中所有叫xx的
$("span").parents("xx").css({"border": "2px solid pink"})
// span的第一个祖先节点
$("span").closest("li").css({"border": "4px solid green"})
// 介于 <span> 和 <div> 之间的所有祖先元素
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

• 后代

// 返回属于 <div> 后代的所有 <span> 元素
$("div").find("span").css({"color":"red","border":"2px solid red"});
// 返回 <div> 的所有后代
$("div").find("*");
// 返回<div> 元素的所有直接子元素
$("div").children().css({"color":"red","border":"2px solid red"});
// 从 <div> 的所有直接子元素中 返回类名为 "1" 的所有 <p> 元素，
$("div").children("p.1").css({"color":"red","border":"2px solid red"})

• 同胞

prev(), prevAll() 以及 prevUntil() 方法返回的是前面的同胞元素

// 返回 <h2> 的所有同胞元素 ( 上下所有同胞 )
$("h2").siblings().css({"color":"red","border":"2px solid red"});
// 返回 <h2> 的所有同胞<p>元素 ( 上下所有同胞 )
$("h2").siblings("p").css({"color":"red","border":"2px solid red"})
// 返回 <h2> 的下一个同胞元素
$("h2").next().css({"color":"red","border":"2px solid red"})
// 返回 <h2> 的之后的所有同胞元素
$("h2").nextAll().css({"color":"red","border":"2px solid red"})
// 返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"})