通過索引使用Javascript獲取HTML順序列表中的元素

Question

我對這個解決方案看起來相當不錯，但我驚奇地找不到任何東西。也許我只是沒有尋找合適的詞彙。我發現了一些關於通過元素獲取索引的問題，但我需要相反的。

我正在嘗試使用JavaScript和jquery通過列表中的索引獲取有序列表中的元素。舉例來說，如果我有這樣的名單：

<ol> 
    <li>Zero</li> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
</ol> 

我希望能夠通過它的1

指數來獲得其指數爲0，或者第二個（ One）的第一個（ Zero）

到目前爲止，我已經嘗試了幾件事情：基於關閉使用該ID在列表中得到一個對象的索引的

1. 一個簡單的函數。

   elem = list.index(0); //To get the first element, but this is not a thing. 
   

2. 一個循環是這樣的：

   //elem is the element I am currently at. 
   //Starting at the last element and going to the first. 
   var elem = list.getLastChild(); //But list.getLastChild() is apparently 
   //not a thing although it is here ([w3c link][1]). 
   
   //Start at 0 and go to the index 
   //(may/may not need the = before num, but I think I do) 
   for(var i=0; i<=num; i++){ 
       //Set elem to it's previous sibling 
   elem = elem.getPreviousSibling(); //getPreviousSibling is probably not a thing as 
       //well but I couldn't get that far before it broke anyway. 
   } 
   
   //Return the element at the index 
   return elem; 
   

那麼，有沒有辦法做到這一點？ 謝謝。

Answer 1

有很多方法可以做到這一點。您可以使用:eq選擇器。像這樣？

var $lis = $('ol li'); 

for(var i=0; i < $lis.length; i++) 
{ 
    alert($('ol li:eq(' + i + ')').text()); 
} 

Demo

所以，這是零索引。你可以這樣做：$('ol li:eq(0)')獲取第一個元素。 您也可以使用CSS，nth-child，nth-of-type選擇：

alert($('ol li:nth-child(1)').text()); // This starts with 1 index, non-zero indexed. 

Answer 2

您可以使用jQuery：

$("ol li:nth-child(1)") 
$("ol li:nth-child(n)") 

http://api.jquery.com/nth-child-selector/