如何使用jQuery选择内层li元素的data-level-id属性？

嘿，这事儿其实挺简单的，jQuery提供了好几种灵活的方式来搞定这个需求，我结合常见场景给你拆解一下：

首先得明确「内层」的定义——通常指嵌套在某个父容器（比如外层<ul>、<div>）里的<li>，我分几种典型情况说明：

1. 选中指定容器下所有带data-level-id的内层<li>（不限嵌套深度） #

如果你的HTML结构类似这样：

<div class="content-wrapper">
  <li>外层普通li（无data属性）</li>
  <ul>
    <li data-level-id="101">内层li 1</li>
    <li data-level-id="102">内层li 2</li>
    <ul>
      <li data-level-id="103">更深层级的li</li>
    </ul>
  </ul>
</div>

要选中.content-wrapper下所有带data-level-id的内层<li>，可以结合后代选择器和属性存在选择器：

// 选中所有符合条件的li元素集合
const innerLis = $('.content-wrapper li[data-level-id]');

// 获取第一个元素的data值（推荐用data()，自动转换类型）
const firstLevelId = innerLis.first().data('level-id');
// 或者用attr()获取原始字符串值
const firstLevelIdStr = innerLis.first().attr('data-level-id');

2. 只选择父容器的直接子级内层<li>（排除更深嵌套的） #

如果只想选外层容器的直接子<li>，比如外层<ul>的直接子项，用子选择器>：

<ul class="outer-menu">
  <li data-level-id="201">直接子级li</li>
  <li>
    <ul>
      <li data-level-id="202">孙子级li（不想选中这个）</li>
    </ul>
  </li>
</ul>

对应的jQuery写法：

// 仅选中.outer-menu的直接子li，且带有data-level-id属性
const directInnerLis = $('.outer-menu > li[data-level-id]');

3. 根据data-level-id的具体值精准筛选 #

如果要定位某个特定值的内层<li>，比如值为"301"的：

// 精确匹配值为301的li
const targetLi = $('li[data-level-id="301"]');

// 模糊匹配（值包含"30"的li）
const fuzzyMatchLis = $('li[data-level-id*="30"]');

这里的=是精确匹配，*=是包含匹配，还有^=（开头匹配）、$=（结尾匹配）等，可按需选择。

4. 批量遍历处理所有符合条件的内层<li> #

如果要批量操作这些元素，比如打印每个的data-level-id值：

$('.content-wrapper li[data-level-id]').each(function() {
  // this指向当前遍历到的li DOM元素
  const currentLevelId = $(this).data('level-id');
  console.log('当前li的层级ID:', currentLevelId);
});

小提醒：用data()方法比attr()更省心，因为jQuery会自动把属性值转换成对应的类型（比如数字、布尔值），而attr()只会返回原始字符串。

内容的提问来源于stack exchange，提问作者user2349508