遍历DOM树,each()遍历

在《jQuery教程/理解选取更新范围》一节中,我们知道:当选择器返回了多个元素时,可以使用一个方法来更新所有的元素,不再需要使用循环。

然后有的时候需要遍历元素,怎么办?

使用each()方法可以遍历。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
< html >
     < head >
         < meta charset = "UTF-8" >
         < title >each()遍历</ title >
         < script src = "https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js" ></ script >
     </ head >
     < body >     
         < div >
             < ul id = "ul" >
                 < li id = "a" >油条</ li >
                 < li id = "b" >包子</ li >
                 < li id = "c" >米饺</ li >
                 < li id = "d" >< a >鱼粉</ a ></ li >
             </ ul >
         </ div >
         < script >
             $('li').each(function(){
                 // 获取每个li元素的id
                 var ids=this.id;
                  // li元素的id追加到li元素后面
                 $(this).append('< em >'+ids+'</ em >');
             });
         </ script >
     </ body >
</ html >

在使用时,each()方法的参数通常是一个匿名函数。用于及时处理遍历的元素。

注意:

this关键字用于访问当前元素,它的意义是代表当前元素。

$(this)的意思是使用关键字this创建一个包含当前元素的jQuery对象。

猜你喜欢

转载自www.cnblogs.com/TangGe520/p/9131892.html
今日推荐