如何使用jQuery动态访问li元素及嵌套列表（含静态/动态ID场景）

Hey there! 既然你已经搞定静态ID的嵌套列表元素选择了，那咱们直接切入动态ID的场景——这其实是日常开发里挺常见的需求，我给你几个实用的方案，你可以根据自己的具体场景挑着用：

首先先明确下动态ID的常见形式，比如像list-item-1、user-list-234这种带固定前缀/后缀的，或者是后端生成的随机ID片段，对吧？下面是几种靠谱的实现方法：

1. 属性选择器匹配前缀/后缀 #

如果你的动态ID是有规律的（比如都以nested-list-开头，或者以-item结尾），那用jQuery的属性选择器就非常方便：

• 匹配以指定字符串开头的ID：

  // 选择所有ID以"nested-list-"开头的元素下的嵌套li
  $('[id^="nested-list-"] li');
  

• 匹配以指定字符串结尾的ID：

  // 选择所有ID以"-item-container"结尾的元素下的嵌套li
  $('[id$="-item-container"] li');
  

• 匹配包含指定字符串的ID（不管位置）：

  // 选择所有ID包含"dynamic-list"的元素下的嵌套li
  $('[id*="dynamic-list"] li');
  

这种方法简单直接，适合ID有统一命名规则的场景。

2. 利用父元素的其他固定属性定位 #

如果动态ID没规律，但父元素有其他固定的属性（比如class、data属性），那更推荐绕开ID，直接用这些固定属性来定位父元素，再找嵌套的li：
比如你的DOM结构是这样的：

<div id="random-123abc" class="list-container" data-type="nested">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

那你可以这么写选择器：

// 通过class定位父容器，再找里面的li
$('.list-container li');
// 或者更精准的，结合data属性筛选
$('[data-type="nested"] li');

class和data属性本来就是为批量元素选择设计的，用它们比依赖动态ID要灵活得多，维护起来也更省心。

3. 动态拼接ID字符串 #

如果你的动态ID是可以通过变量生成的（比如你知道ID的前缀，后缀是某个已知的变量值），那可以直接拼接成完整的ID选择器：
比如你有一个变量listId存储了动态的ID部分：

const listId = 'user-456';
// ES6模板字符串写法，更简洁
$(`#${listId} li`);
// 或者兼容旧环境的字符串拼接写法
$('#' + listId + ' li');

这种方法适合你能提前获取到动态ID值的场景，比如从后端接口返回、或者从页面其他元素的属性里拿到。

4. 遍历筛选符合条件的元素 #

如果动态ID完全没规律，但你有其他判断条件（比如元素的位置、内部的文本内容），可以先获取所有可能的父元素，再用filter()方法筛选出目标容器，最后找嵌套的li：

// 筛选出ID长度大于8的容器，再找里面的li
$('div').filter(function() {
  return this.id.length > 8;
}).find('li');
// 或者根据元素内的文本内容筛选
$('div').filter(function() {
  return $(this).text().includes('Nested List');
}).find('li');

这种方法比较灵活，适合一些特殊场景下的自定义筛选需求。

最后提个小建议：日常开发里，除非必要，尽量不要依赖动态ID来做选择器，用class、data属性或者父元素的层级关系会更稳定，也更容易维护哦。

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