jQuery 遍历DOM

js对 DOM 进行遍历

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

图示解释：

向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

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

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

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

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

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

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

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

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

• children()
• find()

在 DOM 树中水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历：

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

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

过滤

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

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

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

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