jquery遍历li

使用 jQuery 遍历 <li> 元素

jQuery 提供了多种方法来遍历 DOM 元素，以下是几种常见的方法来遍历 <li> 元素：

each() 方法遍历

each() 方法是最常用的遍历方法之一，可以对匹配的元素集合进行迭代。

$('li').each(function(index, element) {
    // index 是当前元素的索引
    // element 是当前 DOM 元素
    console.log(index, $(element).text());
});

children() 方法遍历子元素

如果 <li> 是某个父元素的子元素，可以使用 children() 方法遍历。

$('ul').children('li').each(function() {
    console.log($(this).text());
});

find() 方法查找后代元素

如果 <li> 是嵌套在其他元素中的后代元素，可以使用 find() 方法。

$('ul').find('li').each(function() {
    console.log($(this).text());
});

map() 方法生成新数组

map() 方法可以将匹配的元素集合转换为一个新的数组。

var liTexts = $('li').map(function() {
    return $(this).text();
}).get();
console.log(liTexts);

直接遍历 DOM 元素

也可以直接使用 jQuery 选择器获取 <li> 元素，然后通过索引访问。

var lis = $('li');
for (var i = 0; i < lis.length; i++) {
    console.log($(lis[i]).text());
}

注意事项

• 使用 each() 时，回调函数中的 this 指向当前 DOM 元素，需要用 $(this) 转换为 jQuery 对象。
• children() 只查找直接子元素，而 find() 会查找所有后代元素。
• map() 方法返回的是一个 jQuery 对象数组，需要调用 .get() 方法转换为普通数组。

这些方法可以根据具体需求选择使用，each() 是最通用的遍历方法。