如何获取指定根节点下data-link为procedurestep的直接子span元素

你之前用find会遍历所有后代节点，所以会把嵌套的span也捞出来。要只拿直接子级的目标span，把find换成children就行——children只会查找当前节点的一级子节点，刚好能排除嵌套在div、table这些容器里的span。

修改后的代码：

var children = $(root).children("span[data-link='" + nodeName + "']").eq(nodeNumber);

举个结构示例：

<span data-link="main procedure">
  <span data-link="procedurestep">1</span> <!-- 会被匹配到 -->
  <div>
    <span data-link="procedurestep">2</span> <!-- 被排除，属于div的子节点 -->
  </div>
  <span data-link="procedurestep">3</span> <!-- 会被匹配到 -->
  <td>
    <span data-link="procedurestep">4</span> <!-- 被排除，属于td的子节点 -->
  </td>
</span>

用children就能精准拿到1、3这类直接挂在根节点下的span，完全符合你的需求。

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