jQuery -- 遍历

jQuery中的遍历方法：

第一种：向下遍历：

1 children()
2 find()

相同点：

$( "div1” ).children(“#div2”).css( "background-color", "red" ); 
$( "div1” ).find(“#div2”).css( "background-color", "red" );

上面两个方法，都可以修改 div1 内部的 div2 模型的颜色

不同点：
如果 div1 内部有多个层次的子元素，那么children只能改变 div1 之后的第一层子级
而find () 可以通过传递参数，寻找到 div1 模型中任意一个层次的子级元素，而且find是必须要传入参数，而children默认是传入子级元素的参数

第二种：向上遍历

1 parent() 只能寻找到直接父类
2 parents() 能向上遍历所有的元素
3 parentsUntil() 遍历一个区间

// 只能向上遍历一层
$( "div4” ).parent(“#div3”).css( "background-color", "red" );
// 向上遍历到最外层父类，改变所给的参数元素属性
$( "div4” ).parents( “#div1”).css( "background-color", "red" );
// 遍历一个区间，不包括边界的 div4 和 div1，修改区间内的所有元素属性
$( "div4” ).parents(“#div1” ).css( "background-color", "red" );

第三种：同级之间的遍历

在一个div中有多个p标签：

方法包含：
1 siblings () 修改与其同级的所有元素
2 next () 修改下一个元素
3 nextAll () 修改之后的所有
4 nextUntil () 修改一个区间的所有元素，不包括边界，方向只能向下
5 prev() 作用与 next系列相同，方向向上
6 preAll ()
7 preUntil ()

$( “#p1” ).sibings().css( "background-color", "red" );
$( “#p1” ).next().css( "background-color", "red" );
$( “#p1” ).nextAll().css( "background-color", "red" );
$( “#p1” ).nextUntil(“#p3”).css( "background-color", "red" );

第四种：过滤

在一个div中包含多个p标签，而且没有id：

方法包含：
1 first ()  元素中的第一个
2 last ()   元素中的最后一个
3 eq()  需要传入想要修改的下标
4 filter ()    
5 not ()

$( “div p” ).first().css( "background-color", "red" );
$( “div p” ).last().css( "background-color", "red" );
$( “div p” ).eq(1).css( "background-color", "red" );  // 下标计数从0开始，如果符合的只有一个，那么越界。
$( “div p” ).filter(“p”).css( "background-color", "red" ); // 创建一个满足条件的集合，并返回
$( “div p” ).not(“p”).css( "background-color", "red" );  // not 和 filter的作用相反，返回的是不满足条件的集合

猜你喜欢