jquery遍历li

jQuery 遍历 <li> 元素的方法

使用 jQuery 可以方便地遍历 HTML 中的 <li> 元素。以下是几种常见的遍历方式：

通过选择器直接获取所有 <li> 元素

$('li').each(function(index, element) {
    console.log($(this).text()); // 输出每个li的文本内容
});

遍历特定父元素下的 <li> 子元素

$('#parentId li').each(function() {
    console.log($(this).html()); // 输出每个li的HTML内容
});

使用 children() 方法遍历直接子元素

$('ul').children('li').each(function() {
    $(this).css('color', 'red'); // 将每个li的文字颜色设置为红色
});

使用 find() 方法遍历所有后代 <li> 元素

$('#container').find('li').each(function() {
    $(this).addClass('highlight'); // 为每个li添加highlight类
});

过滤特定的 <li> 元素

$('li').filter('.active').each(function() {
    $(this).removeClass('active'); // 移除所有带有active类的li的active类
});

使用 map() 方法获取 <li> 内容数组

var liContents = $('li').map(function() {
    return $(this).text();
}).get();
console.log(liContents); // 输出所有li文本内容的数组

注意事项

• 确保 DOM 完全加载后再执行 jQuery 代码，可以将代码放在 $(document).ready() 中
• 遍历大量元素时可能会影响性能，建议合理使用选择器缩小范围
• 链式调用可以优化代码，如 $('li').css('color', 'blue').addClass('item')