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() 是最通用的遍历方法。






