无ID场景下HTML目录项与对应内容的关联机制问询

结合你给出的代码片段和场景，这种无ID关联的实现大概率是以下几种方式之一，按可能性从高到低排序：

• 文本内容精准匹配
  这是静态内容关联最常见的方案。目录项（jstree的<a>标签）里的文本内容آدَابُ الدُّعَاءِ دعا کے آداب，和内容区的<span>文本完全对应（主文本+嵌套子span的文本拼接后一致）。前端脚本会做以下操作：

  1. 点击目录项时，提取其文本内容，去除多余空格、换行符等干扰字符；
  2. 在页面内容区域遍历所有目标<span>元素，提取每个元素的完整文本内容（包括嵌套子元素的文本）；
  3. 找到文本完全匹配的内容块，执行定位（比如滚动到该元素位置、高亮显示）。
     这种方案适合从同一数据源批量渲染目录和内容的场景，无需额外ID或属性，依赖内容本身的唯一性。

• DOM节点顺序索引关联
  如果目录树的叶子节点和内容块是按相同顺序生成的（比如从数组循环渲染），脚本会通过节点的索引位置关联：

  1. 点击jstree节点时，获取它在同级节点中的顺序索引（比如第3个叶子节点）；
  2. 在内容区域找到同索引的目标<span>元素（比如第3个带ma mb1 mi0 mul0 mal1 ms22类的span）；
  3. 完成定位操作。
     这种方案不依赖文本内容，只要求渲染顺序严格对应，适合结构化批量生成的页面。

• 隐藏自定义数据属性匹配
  虽然你当前看到的代码片段里没有，但有可能渲染时给目录节点和内容块添加了隐藏的自定义数据属性（比如data-content-id或data-key）。比如：

  • jstree的<li>或<a>标签可能带有data-key="adaab_duaa"；
  • 对应的内容<span>也带有相同的data-key="adaab_duaa"；
    脚本通过读取目录节点的该属性值，在内容区查找属性值匹配的元素实现关联。这类属性可能在页面渲染时自动生成，你查看的代码片段可能未完整展示。

• DOM结构层级关联
  如果目录和内容在DOM结构上存在对应的层级关系（比如同属一个父容器的两个平行子容器），脚本会通过遍历DOM结构来关联：

  1. 点击目录节点时，向上遍历找到它在目录树中的层级位置；
  2. 在内容区域的对应层级结构中，找到位置匹配的内容块；
  3. 执行定位操作。
     这种方案依赖DOM结构的一致性，适合布局固定的页面。

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