jquery遍历li

jQuery 遍历 li 元素的方法

使用 jQuery 可以轻松遍历 <li> 元素，以下是几种常见的方法：

1. each() 方法遍历

$('li').each(function(index, element) {
    console.log($(this).text()); // 获取当前li的文本内容
    console.log(index); // 获取当前索引
});

2. find() 方法结合遍历

$('ul').find('li').each(function() {
    console.log($(this).html()); // 获取当前li的HTML内容
});

3. 直接选择器遍历

$('ul li').each(function() {
    $(this).addClass('highlight'); // 为每个li添加class
});

4. children() 方法遍历子元素

$('ul').children('li').each(function() {
    console.log($(this).attr('id')); // 获取每个li的id属性
});

注意事项

• 确保DOM加载完成后再执行jQuery代码，可以将代码放在 $(document).ready() 中
• 遍历大量元素时考虑性能优化，尽量使用更具体的选择器
• 链式调用可以简化代码，如 $('li').addClass('item').css('color', 'red')

示例：修改所有li内容

$('li').each(function() {
    var currentText = $(this).text();
    $(this).text(currentText + ' - processed');
});

这些方法可以根据实际需求选择使用，each()是最通用的遍历方式，而find()和children()在特定场景下更高效。