0

有没有办法让我遍历功能类似于 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 程序员。

4

3 回答 3

4

没有特定的属性可以让您直接访问<li>.<ol>

然而，枚举它们非常容易，特别是当您认为 an 的唯一合法子<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更现代（因此支持较少）。

于 2013-02-14T15:27:12.860 回答
1

如果使用querySelectorAll()* 是您的一个选项，这很容易：

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

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

于 2013-02-14T15:29:24.587 回答
0

每个 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();
    }
}
于 2013-02-14T15:27:36.773 回答