Question

为了解决这个问题，我看了很多，但令我惊讶的是找不到任何东西。也许我只是没有找到合适的词。我发现了一些关于通过元素获取索引的问题，但我需要相反的。

我正在尝试使用javascript和jquery通过列表中的索引获取有序列表中的元素。例如，如果我有这个列表：

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

我希望第一个（Zero）的索引为0，或者第二个（One）的索引为1。

到目前为止，我尝试了一些事情：

一个基于使用id获取列表中对象索引的简单函数。

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

这样的循环：

//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/

使用Javascript通过索引获取HTML有序列表中的元素

2 个答案: