jquery中的迭代是什么意思

本教程操作系统：Windows10系统、jQuery3.6.0版本、Dell G3电脑。

jquery的迭代代表遍历，分为显示迭代和隐式迭代：

显式迭代就是说，某个jQuery方法只能一个一个地、依次地操作当前轮到的那个元素。

隐式迭代的意思是，某个jQuery方法可以一下子就把对象里（符合条件的）所有的元素都进行某个操作，神不知鬼不觉的就把对象里所有的元素都办了。你也不知道当前操作到哪个元素了，因为一次性就都操作好了。
式迭代的例子：

<ul>
<li>foo</li>
<li>bar</li>
</ul>
$( “li” ).addClass( “bar” );

登录后复制

这就是隐式迭代，不需要你关心当前轮到哪个元素了，因为一下子就把所有的li元素都加上bar这个class了。
还是这个功能，我如果想使用显式迭代的方式来写，该怎么写呢？

$( “li” ).each(function() {
$( this ).addClass( “foo” );
});

登录后复制

对 li 一个一个地添加类，这样写功能上虽然也能实现，但是显然这样写比较啰嗦，并不推荐这种写法。
下面我再举一个只能用显式迭代来写的例子：（HTML 部分的代码和上面一样）

$( “li” ).each(function( index ) {
console.log( index + “: ” + $( this ).text() );
});

登录后复制

登录后复制

.each()方法就是典型的显式迭代：首先我用选择器选中了所有的li元素，形成了一个对象，这样对象是长这样的（类似于 json格式）：[ { 0：li } , { 1：li } ]每个对象还有自己的一大堆属性……

回到.each() 方法。当遍历到第一个li元素的时候，就打印第一条信息；遍历到第二个 li 的时候，再打印第二条信息。

再回顾一下刚才那一段代码：

$( “li” ).each(function( index ) {
console.log( index + “: ” + $( this ).text() );
});

登录后复制

登录后复制

index是一个形参，表示当前轮到的那个元素的下标。既然是形参，不用 index，用 i 也行。
那么问题来了：为什么这个function里写一个参数，这个参数就代表下标了呢？答案是：.each() 方法的function，它有2个参数。

.each方法的写法是这样的：

$(selector).each(function( index , element ){
//do something
})

登录后复制

function的第一个参数是整数的下标，第二个参数用于：返回当前读取到的那个元素，比如刚才的代码，element就是返回每个 li。所以还是刚才的代码，我们也可以这样写：

$( “li” ).each(function( i,element ) {
console.log($(element));
console.log( i + “: ” + $(element).text() );
});

登录后复制

有时候我们不写element，只是因为使用this关键词可以替代element。this等于element，同样，$(this)和$(element)是一样的。使用$()选择器选中this或者element元素之后，我们就可以使用jQuery提供的api，很方便的操作他们，比如，使用text（）方法读取元素的文本内容，或者使用css（方法修改样式，等等。

以上就是jquery中的迭代是什么意思的详细内容，更多请关注Work网其它相关文章！