jQuery 遍历

时间 2019-11-11

标签 jquery 遍历栏目 JQuery 繁體版

原文原文链接

向上遍历 DOM 树

jQuery parent() 方法:

该方法返回被选元素的直接父元素。只会向上一级对 DOM 树进行遍历。html

$(document).ready(function(){
  $("span").parent();   //返回每一个 <span> 元素的的直接父元素：
});

jQuery parents() 方法:

该方法返回被选元素的全部祖先元素，它一路向上直到文档的根元素 (<html>)。

$(document).ready(function(){
  $("span").parents();  //返回全部 <span> 元素的全部祖先：
});

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

$(document).ready(function(){
  $("span").parents("ul");  //返回全部 <span> 元素的全部祖先，而且它是 <ul> 元素：
});

jQuery parentsUntil() 方法:

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

$(document).ready(function(){
  $("span").parentsUntil("div");//返回介于 <span> 与 <div> 元素之间的全部祖先元素：

});

向下遍历 DOM 树

jQuery children() 方法：

children() 方法返回被选元素的全部直接子元素。该方法只会向下一级对 DOM 树进行遍历。

$(document).ready(function(){
  $("div").children();//返回每一个 <div> 元素的全部直接子元素：
});

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

$(document).ready(function(){
  $("div").children("p.1"); //返回类名为 "1" 的全部 <p> 元素，而且它们是 <div> 的直接子元素：
});

jQuery find() 方法：

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

$(document).ready(function(){
  $("div").find("span");//返回属于 <div> 后代的全部 <span> 元素：
});

$(document).ready(function(){
  $("div").find("*");//返回 <div> 的全部后代：
});

在 DOM 树中水平遍历:

jQuery siblings() 方法:

siblings() 方法返回被选元素的全部同胞元素。

$(document).ready(function(){
  $("h2").siblings();//返回 <h2> 的全部同胞元素：
});

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

$(document).ready(function(){
  $("h2").siblings("p");//返回属于 <h2> 的同胞元素的全部 <p> 元素：
});

jQuery next() 方法:

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

$(document).ready(function(){
  $("h2").next();//返回 <h2> 的下一个同胞元素：
});

jQuery nextAll() 方法:

nextAll() 方法返回被选元素的全部跟随的同胞元素。

$(document).ready(function(){
  $("h2").nextAll();//返回 <h2> 的全部跟随的同胞元素：
});

jQuery nextUntil() 方法:

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

$(document).ready(function(){
  $("h2").nextUntil("h6");//返回介于 <h2> 与 <h6> 元素之间的全部同胞元素：
});

prev(), prevAll() 以及 prevUntil() 方法的工做方式与上面的方法相似，只不过方向相反而已：它们返回的是前面的同胞元素。函数

缩小搜索元素的范围

jQuery first() 方法：

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

$(document).ready(function(){
  $("div p").first();//选取首个 <div> 元素内部的第一个 <p> 元素：

});

jQuery last() 方法：

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

$(document).ready(function(){
  $("div p").last();//选择最后一个 <div> 元素中的最后一个 <p> 元素：
});

jQuery eq() 方法：

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

$(document).ready(function(){    //索引号从 0 开始，所以首个元素的索引号是 0 而不是 1
  $("p").eq(1);//选取第二个 <p> 元素（索引号 1）；
});

jQuery filter() 方法：

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

$(document).ready(function(){
  $("p").filter(".url");//返回带有类名 "url" 的全部 <p> 元素：
});

jQuery not() 方法：

not() 方法返回不匹配标准的全部元素。

$(document).ready(function(){
  $("p").not(".url");//返回不带有类名 "url" 的全部 <p> 元素：
});

jQuery 遍历方法

方法	描述
add()	把元素添加到匹配元素的集合中
addBack()	把以前的元素集添加到当前集合中
andSelf()	在版本 1.8 中被废弃。addBack() 的别名
children()	返回被选元素的全部直接子元素
closest()	返回被选元素的第一个祖先元素
contents()	返回被选元素的全部直接子元素（包含文本和注释节点）
each()	为每一个匹配元素执行函数
end()	结束当前链中最近的一次筛选操做，并把匹配元素集合返回到前一次的状态
eq()	返回带有被选元素的指定索引号的元素
filter()	把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
find()	返回被选元素的后代元素
first()	返回被选元素的第一个元素
has()	返回拥有一个或多个元素在其内的全部元素
is()	根据选择器/元素/jQuery 对象检查匹配元素集合，若是存在至少一个匹配元素，则返回 true
last()	返回被选元素的最后一个元素
map()	把当前匹配集合中的每一个元素传递给函数，产生包含返回值的新 jQuery 对象
next()	返回被选元素的后一个同级元素
nextAll()	返回被选元素以后的全部同级元素
nextUntil()	返回介于两个给定参数之间的每一个元素以后的全部同级元素
not()	从匹配元素集合中移除元素
offsetParent()	返回第一个定位的父元素
parent()	返回被选元素的直接父元素
parents()	返回被选元素的全部祖先元素
parentsUntil()	返回介于两个给定参数之间的全部祖先元素
prev()	返回被选元素的前一个同级元素
prevAll()	返回被选元素以前的全部同级元素
prevUntil()	返回介于两个给定参数之间的每一个元素以前的全部同级元素
siblings()	返回被选元素的全部同级元素
slice()	把匹配元素集合缩减为指定范围的子集