有序列表迭代在Javascript中

有沒有一種方法可以讓我循環遍歷與table.rows類似的有序列表？我正在使用Javascript。有序列表迭代在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程序員。

來源

2013-02-14 C3PO

你只是想問一下vanilla Javascript還是你可以使用jQuery？ – Sunyatasattva 2013-02-14 15:21:18

你想'平原'的JavaScript或者你可以使用jQuery？ – pbaris 2013-02-14 15:22:06

只是爲了好玩，讓我們假設*未標記的問題* [tag：jquery]不需要* jQuery答案。 – 2013-02-14 15:22:44

沒有specific屬性，可讓您直接訪問<ol>的<li>子女。

但是，列舉它們非常容易，尤其是當您認爲<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-14 15:27:12 Alnitak

'var li = document.getElementById（'pList'）。children;' – jantimon 2013-02-14 15:29:13

@Ghommey'.children'在老版本的MSIE上有「奇怪」的行爲。見http://stackoverflow.com/questions/7935689/what-is-the-difference-between-children-and-childnodes-in-javascript – Alnitak 2013-02-14 15:34:44

和'.childNodes'？還是我們在這裏指的是同樣的東西？ – 2013-02-14 15:36:37

有直接孩子的表中的每個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-14 15:27:36

請參閱http://stackoverflow.com/questions/7935689/what-is-the-difference-between-children-and-childnodes-in-javascript – Alnitak 2013-02-14 15:36:56

注意到兼容性問題，謝謝！ – 2013-02-14 15:40:04

我希望有像table.rows直接訪問。所以我想老式的方式會做。 – C3PO 2013-02-14 15:48:57

如果使用querySelectorAll() *是一個選擇，很容易：

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

* 注意：這是一個不適用tive DOM方法，並且與jQuery無關

來源

2013-02-14 15:29:24

+1快速可讀 – jantimon 2013-02-14 15:46:16

不錯。下次會使用它，因爲OL在這種情況下並不總是有ID。謝謝 – C3PO 2013-02-14 15:47:59

有序列表迭代在Javascript中

回答

相關問題