jQuery 遍历

遍历-祖先

遍历方法：

• parent()-返回被选元素的直接父元素
• parents()-返回被选元素的所有祖先元素，它一路向上直到文档的根元素
• parentsUntil()-返回介于两个给定元素之间的所有祖先元素

语法：

//parent()
$("span").parent();

//parents()
$("span").parents();

//也可以使用可选参数来过滤对祖先元素的搜索
//返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
$("span").parents("ul");

//parentsUntil()
//返回介于 <span> 与 <div> 元素之间的所有祖先元素：
$("span").parentsUntil("div");

遍历 - 后代

遍历方法：

• children()-返回被选元素的所有直接子元素
• find()-返回被选元素的后代元素，一路向下直到最后一个后代

children()方法

//遍历每个div元素的所有直接子元素
$("div").children()

//返回类名为 "test" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
$("div").children("p.test");

find()方法

//返回div后代的所有span元素
$("div").find("span");
//返回div元素的所有后代
$("div").find("*");

遍历 - 同胞(siblings)

siblings() 方法

//返回h2所有同胞元素
$("h2").siblings().css({"color":"red","border":"2px solid red"});
//返回h2同胞元素的所有span元素
$("h2").siblings("span").css({"color":"red","border":"2px solid red"});

next() 方法与nextAll() 方法

//返回p元素的下一个元素
$("p").next().css({"color":"red","border":"1px solid red"});

//返回p元素的所有跟随的同胞元素
$("p").nextAll().css({"color":"red","border":"1px solid red"});

nextUntil() 方法

//h2到h5之间的所有元素
$("h2").nextUntil("h5").css({"color":"red","border":"1px solid red"});

遍历- 过滤

缩小搜索元素的范围
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许基于其在一组元素中的位置来选择一个特定的元素。

 $(function() {
 //first()选取div中第一个p元素，将其背景颜色改为green
    $("div p").first().css({"background-color":"green"});
//last()选取最后一个p元素
   $("p").last().css({"background-color":"orange"});
   
//eq()方法返回被选元素中带有指定索引号的元素,索引号从 0 开始，因此首个元素的索引号是 0 而不是 1
  $("p").eq(1).css("background-color","yellow");
//选取p元素索引号为1的元素
})

filter() 方法
filter() 方法允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

//返回带有类名test所有的p元素
 $("p").filter(".test").css("background-color","red");

not() 方法

not() 方法与 filter() 相反。