11.jQuery遍历

遍历

jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

祖先 jQuery parent() 方法

• parent() 方法返回被选元素的直接父元素。

• 该方法只会向上一级对 DOM 树进行遍历。

• parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (html)。

• 您也可以使用可选参数来过滤对祖先元素的搜索。

• 下面的例子返回所有 span 元素的所有祖先，并且它是 url 元素：

• parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

后代 jQuery children() 方法

• children() 方法返回被选元素的所有直接子元素。

• 该方法只会向下一级对 DOM 树进行遍历。

• 您也可以使用可选参数来过滤对子元素的搜索。

• 下面的例子返回类名为 "a" 的所有 p 元素，并且它们是 div 的直接子元素：

$(document).ready(function(){
  $("div").children("p.a");
});

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

$(document).ready(function(){
  $("div").find("*");//返回div 的所有后代：
});

同胞 jQuery siblings() 方法

• siblings() 方法返回被选元素的所有同胞元素。

• 您也可以使用可选参数来过滤对同胞元素的搜索。

• next() 方法返回被选元素的下一个同胞元素。

• 该方法只返回一个元素。

• nextAll() 方法返回被选元素的所有跟随的同胞元素。

• nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

• prev()方法取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

• 下面的例子返回 h2 的上一个同胞元素

$(document).ready(function(){
  $("h2").prev();
});

prevAll() 方法查找当前元素之前所有的同辈元素

prevUntil() 方法查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止

过滤 jQuery first() 方法

• first() 方法返回被选元素的首个元素。

• last() 方法返回被选元素的最后一个元素。

• eq() 方法返回被选元素中带有指定索引号的元素。

• 索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。

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

• 下面的例子返回带有类名 "url" 的所有p 元素：

  $(document).ready(function(){
    $("p").filter(".url");
  });

• not() 方法返回不匹配标准的所有元素。

• 提示：not() 方法与 filter() 相反。

遍历元素

在DOM元素操作中，有时需要对同一标记的全部元素进行统一操作。在传统的JavaScript中，先获取元素的

总长度，然后以for循环语句递减总长度，访问其中的某个元素，代码相对复杂；而在jQuery中，可以直接使

用each(callback)方法实现元素的遍历。