jQuery遍历

什么是遍历?

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

这些 jQuery 方法很有用,它们用于遍历 DOM 树:

<body>

  <div>

    <ul>

      <li><span></span></li>

    </ul>

  </div>

</body>

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

$("span").parent();  //返回元素<li>

parents() 方法返回被选元素的所有祖先元素,直到文档的根元素 (<html>)

$("span").parents();  //返回一个对象,0:<li>,1:<ui>,2:<div>...

$("span").parents("#kk");   //添加参数意为所有祖先元素中id=kk的元素

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

$("span").parentsUntil("div");  //返回<li>和<ul>,注意不包含<div>

$("span").parentsUntil("div","#kk");   //添加参数意为选中的元素中id=kk的元素

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

$("div").children();  //可以添加参数过滤

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

$("div").find("*");  //返回 <div> 的所有后代

$("div").find("span");  //返回属于 <div> 后代的所有 <span> 元素

在 DOM 树中水平遍历

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

  • siblings()  返回所选元素的所有兄弟元素
  • next()     返回所选元素的下一个兄弟元素
  • nextAll()   返回所选元素的后面的所有兄弟元素
  • nextUntil("目标元素")  返回所选元素到目标元素之间的所有兄弟元素(向后)
  • prev()   返回所选元素的上一个兄弟元素
  • prevAll()    返回所选元素的前面的所有的兄弟元素
  • prevUntil("目标元素") 返回所选元素到目标元素之间的所有兄弟元素(向前)

jQuery 遍历- 过滤

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

$("div p").first();  //返回第一个div下的第一个p元素

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

$("div p").last();  //返回最后一个div下的最后一个p元素

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

$("p").eq(1);  //返回所有p元素中的第2个p元素

filter() 方法允许您规定一个标准

$("p").filter(".url");  //返回所有p元素中class=url的元素

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

$("p").not(".url");  //返回所有p元素中class != url的元素

原文地址:https://www.cnblogs.com/1016391912pm/p/11929050.html