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')
