jQuery 循环遍历 li 元素

在前端开发中，我们常常需要使用 jQuery 对 DOM 元素进行操作，其中循环遍历 li 元素是经常用到的一种情况。例如，我们需要为每个 li 元素添加一个 click 事件，或者获取每个 li 元素的文本内容或属性等。

下面，我们将会介绍两种经典的方式来使用 jQuery 循环遍历 li 元素。

方式一：使用 each() 方法

jQuery 提供了 each() 方法，可以用于循环遍历匹配的元素集合。该方法接受一个回调函数作为参数，该回调函数将在匹配的每个元素上被调用。回调函数中的 this 关键字指向当前正在处理的元素，可以通过 $(this) 获取当前元素的 jQuery 对象。

示例代码如下：

$("li").each(function() {
  console.log($(this).text());
});

上面的代码将会循环遍历所有 li 元素，并分别输出它们的文本内容。我们也可以在回调函数中进行各种操作，例如添加事件监听器、获取元素属性、修改样式等。

方式二：使用 for 循环

如果你更喜欢使用传统的 for 循环，那么也可以针对 li 元素进行遍历。需要注意的是，在这种方式下，我们需要使用 jQuery 的 eq() 方法来获取指定索引位置的元素，而不是使用数组下标的方式。

示例代码如下：

for (var i = 0; i < $("li").length; i++) {
  console.log($("li").eq(i).text());
}

上面的代码与方式一的示例代码功能相同，将会循环遍历所有 li 元素，并分别输出它们的文本内容。可以看到，这种方式略显繁琐，推荐使用方式一。

总结

在本文中，我们介绍了两种经典的方式来使用 jQuery 循环遍历 li 元素。无论是使用 each() 方法还是 for 循环，在实际开发中都有其各自的应用场景。我们希望本文能够帮助你更好地理解 jQuery 中的基础操作，进而提高前端开发能力。

代码片段：

$("li").each(function() {
  console.log($(this).text());
});

for (var i = 0; i < $("li").length; i++) {
  console.log($("li").eq(i).text());
}