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中的li。我只想要pList中的那些。

由于

仅供参考：我希望在Javascript中完成它。代码必须在Greasemonkey中工作。我对jquery并不是很了解，我不是一个javascript程序员。

Answer 1

没有specific属性可让您直接访问<li>的{{1}}个孩子。

然而，枚举它们非常容易，特别是当您认为<ol>的唯一合法子节点必须是空格文本节点和<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集合在旧版本的MSIE上存在问题，而.children更加现代（因此支持程度较低）。

Answer 2

如果您使用querySelectorAll() *是一个选项，那很简单：

var listItems = document.querySelectorAll( '#pList > li' );

* 注意：它是一个原生DOM方法，与jQuery无关

Answer 3

每个javascript对象中都有一个直接子项表：

document.getElementById('pList').children

您甚至可以遍历它并检查您的需求：

var el = document.getElementById('pList');
for (var i = 0; i < el.children.length; i++) {
    if (el.children[i].tagName == "LI") {
        el.children[i].doWhatever();
    }
}

Javascript中的有序列表迭代

3 个答案: