jQuery中的遍历

jQuery中的遍历

向下遍历

1. childen(可选参数）
   • 只能遍历他的下一级（儿子辈）

(" #dv ").childen(" li ")

2. find(必选参数）
   • 可以找到任意一级参数

$(" #dv ").find(" li ")

向上遍历

1. parent(可选参数）
   • 只能遍历他的上一级（父辈）

$(" #dv ").parent()

2. parents(）
   • 向上遍历所有的元素

$(" #dv ").parents()

3. parentUntil(）
   • 向上在一个区间内遍历所有的元素

向上遍历a标签到div标签之间的所有元素 $(" a ").parentUntil("div")

同级遍历

1.next();

• 获取的是当前元素的下一个兄弟元素

$(this).next().css("backgroundColor","green");

2.nextAll();

• 获取的是当前元素的后面的所有的兄弟元素

$(this).nextAll().css("backgroundColor","green");

3.nextUntil();

• 同级元素下面元素的一个区间

同级遍历 li1 标签到 li2 标签之间的所有元素 $("# li1 ").nextUntil("# li2")

4.prev();

• 获取的是当前元素的前一个兄弟元素

$(this).prev().css("backgroundColor","green");

5.prevAll();

• 获取的是当前元素的前面的所有的兄弟元素

$(this).prevAll().css("backgroundColor","green");

6.prevUntil();

• 同级元素上面面元素的一个区间

同级遍历 li1 标签到 li2 标签之间的所有元素 $("# li1 ").prevUntil("# li2")

7.siblings();

• 获取的是当前元素的所有的兄弟元素(自己除外)

$(this).siblings().css("backgroundColor","green");

过滤效果

1.first();

• 第一个符合条件的元素

获得第一个p标签元素 $(“div p”).first();

2.last();

• 最后一个符合条件的元素

获得最后一个p标签元素 $(“div p”).last();

3.eq(index);

• 指定第几个标签元素
• 下标从 0开始

获得第四个p标签元素 $(“div p”).eq(3);

4.filter();

• 过滤留下特定的

过滤所有不是 cls样式的标签元素 $(this).filter(".cls");

5.not();

• 过滤掉指定的

过滤所有是 cls样式的标签元素 $(this).not(".cls");

each()方法的使用

• each：迭代方法（循环）
  • 参数1：索引
  • 参数2：对象

$("#uu>li").each(function (index,element) {
   //第一个参数是索引,第二个参数是对象
   $(element).css("opacity",(index+1)/10);
});
复制代码

转载于:https://juejin.im/post/5cf20adb6fb9a07eae2a4602