当前位置:首页 > jquery

jquery遍历li

2026-04-08 16:25:46jquery

使用 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> 元素,然后通过索引访问。

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

标签: 遍历jquery
分享给朋友:

相关文章

jquery官网

jquery官网

jQuery 官网地址 jQuery 的官方网站是 https://jquery.com/。该网站提供以下核心内容: 下载 jQuery:提供最新版本的 jQuery 库(压缩版和未压缩版),支持直…

jquery怎么读

jquery怎么读

jQuery的正确发音 jQuery的发音为 "jay-query"(/ˈdʒeɪkwɪəri/)。其中: "jay" 发音类似字母 "J" 的英文读法。 "query" 发音与英文单词 "qu…

jquery 图表

jquery 图表

jQuery 图表库推荐 jQuery 本身不直接提供图表功能,但可以通过插件或集成其他库实现图表绘制。以下是几种常用的 jQuery 图表解决方案: Chart.js 集成 Chart.j…

jquery的

jquery的

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它的核心理念是“写得更少,做得更多”(Write Le…

jquery事件

jquery事件

jQuery 事件基础 jQuery 提供了一套简化的事件处理机制,允许开发者通过简洁的语法绑定、触发和管理事件。核心方法包括 on()、off()、trigger() 等,支持常见事件(如点击、悬停…

jquery文件

jquery文件

jQuery文件获取与使用 jQuery是一个快速、简洁的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互。以下是获取和使用jQuery文件的方法。 下载jQuery文件…