9-jQuery-遍历

jQuery 遍历

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

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nFr9gfMw-1614676471973)(/home/gao/.config/Typora/typora-user-images/image-20210302165612770.png)]

图示解析：

• 元素是

  • 的父元素，同时是其中所有内容的祖先。
• • 元素是
  • 元素的父元素，同时是
    的子元素

  • 左边的

  • 元素是 的父元素，
    • 的子元素，同时是
      的后代。

  • 元素是

  • 的子元素，同时是
    • 和
      的后代。

  • 两个

  • 元素是同胞（拥有相同的父元素）。

  • 右边的

  • 元素是 的父元素，
    • 的子元素，同时是
      的后代。

  • 元素是右边的

  • 的子元素，同时是
    • 和
      的后代。

jQuery遍历-祖先

向上遍历 DOM 树

• parent()
• parents()
• parentsUntil()

parent() 方法

返回被选元素的直接父元素

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

$(document).ready(function(){
    $("span").parent();
});

parents() 方法

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

$(document).ready(function(){
    $("span").parents();
});

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

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

• 元素：

$(document).ready(function(){
  $("span").parents("ul");
});

parentsUntil() 方法

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

下面的例子返回介于 与

元素之间的所有祖先元素：

$(document).ready(function(){
  $("span").parentsUntil("div");
});

jQuery-后代

向下遍历 DOM 树的 jQuery 方法

• children()
• find()

children() 方法

返回被选元素的所有直接子元素

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

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

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

下面的例子返回类名为 “1” 的所有

元素，并且它们是

的直接子元素：

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

find() 方法

返回被选元素的后代元素，一路向下直到最后一代。

下面返回属于 div 后代所有的 span 元素

$(document).ready(function(){
    $("div").find("span");
});

下面返回 div 的所有后代

$(document).ready(function(){
  $("div").find("*");
});

jQuery 同胞

也就是进行水平遍历

有这些方法

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

siblings() 方法

返回被选元素的所有同胞元素。

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

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

下面的例子返回属于

的同胞元素的所有

元素：

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

next() 方法

返回被选元素的下一个同胞元素

该方法只返回一个元素。

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

nextAll() 方法

返回被选元素的所有跟随的同胞元素

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

nextUntil() 方法

返回介于两个给定参数之间的所有跟随的同胞元素。

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

jQuery 遍历-过滤

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

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法

返回被选元素的首个元素。

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

last() 方法

返回被选元素的最后一个元素。

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

eq() 方法

返回被选元素中带有指定索引号的元素。索引从0开始。

$(document).ready(function(){
    $("p").eq(1);
});

filter() 方法

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

下面的例子返回带有类名 “url” 的所有

元素：

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

not() 方法

返回不匹配标准的所有元素

not() 和 filter() 相反。

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