jQuery 的 each 遍历

简介: jQuery 的 each 遍历

你可能会很好奇 :“ 啊在刚开始学习 jQuery 的时候我记得不是学到过一个什么什么迭代吗?哦对是隐式迭代,那个不就是遍历的简单操作嘛,那为什么还要学习遍历呢???”


下面我来给各位好奇宝宝做出解释,我们先想想我们学习隐式迭代是为了什么?是不是为了给相同的元素赋予相同的样式或操作,但是如果我们要给相同的元素赋予不同的操作呢?这怎么办,隐式迭代是不是瞬间就变得束手无策了,这时就需要我们 jQuery 的遍历操作 each( ) 和  $.each 登场了!!!




文章目录:

一:遍历元素 each( )


1.1 each( ) 的使用语法:


1.2 each( ) 的使用方法举例:


结果输出:


二:遍历元素 $.each( )


2.1 $.each( ) 的使用语法:


2.2 $.each( ) 的使用方法举例:


第一个例子 遍历数组:


第二个例子 遍历对象:


三:小结


综上所述:


一:遍历元素 each( )

给同一类元素做相同的操作,我们可以使用 jQuery 的隐式迭代,但是如果想给想遍历操作 DOM 元素并操作元素,就要用到 each() 来遍历我们的元素,下面是 each( ) 的使用语法:


1.1 each( ) 的使用语法:

$( 'ele' ).each( function( index , element ) { xxx } )

each 方法参数为一个回调函数,函数里面有两个参数,第一个参数 index 代表获取的相同元素的索引值(该方法会自动给目标元素设置索引值,不需要手动添加),第二个参数 element 为遍历到的内容

注意!!:遍历到的 element 为 DOM 元素,不能使用 jQuery 的样式操作方法,要转为jQuery 元素才能使用!

1.2 each( ) 的使用方法举例:

此处我们举一个例子来更生动解释其用法,例如我们有三个 div 标签,我们要分别给三个 div 的背景设置不同的颜色,我们该如何操作,首先我们可以设置一个数组里面存放好要设置的三个颜色,再用 each() 去遍历


<body>

   <div>111</div>

   <div>222</div>

   <div>333</div>

   <script>

       arr=['red','pink','green']

        $('div').each(function(index,element){

            $(element).css('backgroundColor',arr[index]) //要将element转换为jQuery对象才能使用css方法

        })

   </script>

</body>

结果输出:

分别设置了不同的背景颜色




二:遍历元素 $.each( )

如果想要遍历获取操作数据,例如对象,数组的遍历,推荐最好来使用 $.each ,下面是 $.each 的使用语法:


2.1 $.each( ) 的使用语法:

$.each( $( 'ele' ) , function( index ,element ){xxxx} )

$.each() 可以遍历任何形式,数组,对象均可遍历,所以如果选择遍历数据我们选择这个方法,其方法的参数有两个,第一个参数为要操作的元素,第二个参数为回调函数,函数里面仍然是两个参数,第一个参数 index 代表获取的相同元素的索引值(该方法会自动给目标元素设置索引值,不需要手动添加),第二个参数 element 为遍历到的内容

注意!!:遍历到的 element 为 DOM 元素,不能使用 jQuery 的样式操作方法,要转为jQuery 元素才能使用!

2.2 $.each( ) 的使用方法举例:

此处我们举几个例子来更生动解释其用法


第一个例子 遍历数组:

   <script>

       arr=['red','pink','green']

        $.each(arr,function(index,element){

            console.log(index);

            console.log(element);

        })

   </script>



第二个例子 遍历对象:

这个案例类似于 for in 遍历对象,分别输出了键与值


  <script>

        $.each({

            name:'张三',

            age:18

        },function(index,element){

            console.log(index);  //输出属性名

            console.log(element);  //输出属性值

        })

   </script>



三:小结

综上所述:

如果我们想要遍历操作DOM元素,我们推荐使用 each( )

如果想要遍历数据,例如对象,数组等等,我们推荐使用 $.each( )


相关文章
|
7月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
|
3月前
|
JavaScript
jQuery 遍历
jQuery 遍历
31 2
jQuery 遍历
|
3月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
34 5
|
3月前
|
JavaScript
jQuery 遍历
jQuery 遍历
37 1
jQuery 遍历
|
3月前
|
JavaScript
jQuery 遍历 - 同胞(siblings)
jQuery 遍历 - 同胞(siblings)
26 6
|
3月前
|
JavaScript
jQuery 遍历 - 祖先
jQuery 遍历 - 祖先
36 5
|
3月前
|
JavaScript
jQuery 遍历- 过滤
jQuery 遍历- 过滤
22 2
|
3月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
27 3
|
3月前
|
JavaScript
jQuery 遍历 - 祖先
jQuery 遍历 - 祖先
18 4
|
3月前
|
JavaScript
jQuery 遍历 - 同胞(siblings)
jQuery 遍历 - 同胞(siblings)
21 2