jQuery ul列表 获取ul中第1层li的index和对应值的方法

获取ul列表中第一层li的index和值：jQuery实战指南 🛠️

场景引入：
小明正在开发一个电商网站的商品分类菜单，突然发现需要获取每个一级分类的序号和文本内容来做特殊样式处理。"这该怎么做呢？"他挠着头自言自语，别担心！今天我们就来聊聊如何用jQuery轻松搞定这个问题！💡

基础概念先了解 📚

在开始之前,让我们明确几个关键点：

1. 第一层li：指的是直接位于ul下的li元素，不包括嵌套在li内部的ul中的li
2. index：指的是该li在其同级兄弟中的位置序号（从0开始）
3. 值：通常指li元素的文本内容或特定属性值

核心方法大公开 🔍

方法1：使用.each()遍历 + index()

$('ul > li').each(function(index) {
    var text = $(this).text(); // 获取li的文本内容
    console.log("Index: " + index + ", 值: " + text);
});

代码说明：

• ul > li 选择器确保只选择ul的直接子li
• .each() 遍历每个匹配的元素
• index 参数自动提供当前元素的索引
• $(this).text() 获取当前li的文本内容

方法2：使用.index()方法单独获取

$('ul > li').click(function() {
    var index = $(this).index(); // 获取点击li的index
    var text = $(this).text();
    alert("你点击了第" + index + "项，内容是：" + text);
});

适用场景：特别适合需要响应点击事件的交互场景 👆

进阶技巧 🚀

获取特定属性的值

$('ul > li').each(function(i) {
    var dataValue = $(this).attr('data-custom'); // 获取data-custom属性
    console.log(i + ": " + dataValue);
});

过滤特定条件的li

$('ul > li').filter(':even').each(function(i) {
    console.log("偶数项 " + i + ": " + $(this).text());
});

结合CSS类使用

$('ul > li.active').each(function(i) {
    console.log("活跃项 " + i + ": " + $(this).text());
});

常见问题解答 ❓

Q1：为什么我的代码获取到了嵌套ul中的li？
A1：确保使用子选择器 ul > li 而不是后代选择器 ul li,前者只匹配直接子元素。

Q2：index从1开始计数可以吗？
A2：当然可以！在输出时 +1 即可：

console.log("序号: " + (index + 1) + ", 值: " + text);

Q3：如何获取HTML内容而不仅是文本？
A3：使用 .html() 代替 .text() 方法：

var content = $(this).html();

实际应用案例 🏆

假设我们有以下HTML结构：

<ul id="category">
    <li>电子产品 📱</li>
    <li>服装 👕</li>
    <li>食品 🍎
        <ul>
            <li>水果</li>
            <li>蔬菜</li>
        </ul>
    </li>
    <li>图书 📚</li>
</ul>

使用我们的方法,可以完美获取：

Index: 0, 值: 电子产品 📱
Index: 1, 值: 服装 👕
Index: 2, 值: 食品 🍎
Index: 3, 值: 图书 📚

完全不会受到嵌套ul的干扰！🎯

性能小贴士 ⚡

1. 缓存选择器结果：

   var $items = $('ul > li'); // 先存储起来
   $items.each(function(i) { ... });

2. 对于超大列表，考虑使用原生JS获取更高性能

3. 尽量使用ID或类名限定范围，如 $('#nav > li')

   

掌握了这些方法，小明的分类菜单问题迎刃而解！现在他不仅能获取每个一级分类的序号和内容，还能根据这些数据实现各种炫酷的效果，你也快来试试吧！✨

本文方法基于jQuery 3.6+版本验证，信息参考日期2025-08