javascript - Javascript 中的有序列表迭代

Question

有没有办法让我迭代功能与 table.rows 类似的有序列表？我正在使用 JavaScript。

我问这个问题的原因是因为我有一个有序列表，其中包含另一个有序列表。我只想返回父列表项而不是子列表项。

<ol id="pList">
    <li>Item A</li>
    <li>
        <ol id="cList">
            <li>A's Child 1</li>
            <li>A's Child 2</li>
        </ol>
    </li>
    <li>Item B</li>
    <li>Item C</li>
    <li>Item D</li>
</ol>

我现在使用 getElementsbyTag 并返回所有 li，包括 cList 中的那个。我只想要 pList 中的那些。

谢谢

仅供引用:我更喜欢用 Javascript 完成。该代码必须在 Greasemonkey 中运行。我对 jquery 不太了解，也不是一个 javascript 程序员。

Answer 1

没有specific属性，让您可以直接访问 <li> <ol> 的 child .

但是，枚举它们非常容易，特别是当您考虑 <ol> 的唯一合法子代时。必须是空白文本节点且 <li>节点。

var ol = document.getElementById('pList');
var li = [];
var node = ol.firstChild;
while (node) {
    if (node.tagType === 3 && node.tagName === 'LI') {
        li.push(node);
    }
    node = node.nextSibling;
}

最后，数组 li包含所需的子项。

上面的代码可以在任何浏览器中运行。 .children集合在较旧版本的 MSIE 上存在问题，并且 querySelectorAll甚至更现代(因此不太受广泛支持)。