使用Javascript通过索引获取HTML顺序列表中的元素 [英] Get Element in HTML Ordered List by Index Using Javascript

问题描述

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

我试图使用javascript和jquery获取一个元素按列表中的索引列出。例如，如果我有这个列表：

 < ol> 
< li>零< / li> 
< li> One< / li> 
< li>两个< / li> 
< li>三< / li> 
< / ol> 
  

我希望能够得到第一个（ Zero code>）的索引值为0，或者第二个索引号（ One ）的索引值为1。

到目前为止，我已经尝试了几件事：



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

     elem = list.index（0）; //获取第一个元素，但这不是一件事情。 
     




2. 循环如下：
   
   

     // elem是我目前的元素。 
    //从最后一个元素开始到第一个元素。 
    var elem = list.getLastChild（）; //但是list.getLastChild（）显然是
    //不是东西，尽管它在这里（[w3c link] [1]）。 
    
    //从0开始并转到索引
    //（可能/不需要= num之前的数据，但我想我可以）
    for（var i = 0; i <= num; i ++）{
    //将elem设置为之前的兄弟
    elem = elem.getPreviousSibling（）; // getPreviousSibling可能不是
    //好的东西，但是在破坏之前我还没有达到那么远。 
   } 
    
    //返回索引
   的元素return elem; 
     

那么有没有办法做到这一点？
Thanks。

解决方案

有很多方法可以做到这一点。您可以使用 ：eq 选择器。像这样？

  var $ lis = $（'ol li'）; 
 
 for（var i = 0; i <$ lis.length; i ++）
 {
 alert（$（'ol li：eq（'+ i +'）） '）。文本（））; 
} 
  

Demo

所以，这是零索引。你可以这样做： $（'ol li：eq（0）'）获取第一个元素。
您也可以使用css， nth-child ， nth-type 选择器：

  alert（$（'ol li：nth-​​child（1）'）。text（））; //这从1索引开始，非索引索引。 
  

I looked quite a bit for a solution for this but I surprisingly couldn't find anything. Maybe I just didn't search for the right words. I found a bunch of questions about getting the index by the element, but I need the opposite.

I'm trying to use javascript and jquery get an element in an ordered list by it's index in the list. For example, if I have this list:

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

I would like to be able to get the first one (Zero) by its index of 0, or the second one (One) by its index of 1.

So far I have tried a few things:

1. A simple function based off of the getting the index of an object in a list using the id.

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

2. A loop like this:

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

So is there a way to do this? Thanks.

解决方案

There are many ways to do this. You can use :eq selector. Something like this?

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

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

Demo

So, as this is zero indexed. You could do: $('ol li:eq(0)') for getting the first element. You can also use css, nth-child, nth-of-type selector:

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

这篇关于使用Javascript通过索引获取HTML顺序列表中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！