Get an element by index in jQuery

问题:

I have an unordered list and the index of an li tag in that list. I have to get the li element by using that index and change its background color. Is this possible without looping the entire list? I mean, is there any method that could achieve this functionality?

Here is my code, which I believe would work...

<script type=\"text/javascript\">
  var index = 3;
</script>

<ul>
    <li>India</li>
    <li>Indonesia</li>
    <li>China</li>
    <li>United States</li>
    <li>United Kingdom</li>
</ul>

<script type=\"text/javascript\">
  // I want to change bgColor of selected li element
  $(\'ul li\')[index].css({\'background-color\':\'#343434\'});

  // Or, I have seen a function in jQuery doc, which gives nothing to me
  $(\'ul li\').get(index).css({\'background-color\':\'#343434\'});
</script>

回答1:

$(...)[index]      // gives you the DOM element at index
$(...).get(index)  // gives you the DOM element at index
$(...).eq(index)   // gives you the jQuery object of element at index

DOM objects don\'t have css function, use the last...

$(\'ul li\').eq(index).css({\'background-color\':\'#343434\'});

docs:

.get(index) Returns: Element

• Description: Retrieve the DOM elements matched by the jQuery object.
• See: https://api.jquery.com/get/

.eq(index) Returns: jQuery

• Description: Reduce the set of matched elements to the one at the specified index.
• See: https://api.jquery.com/eq/

回答2:

You can use jQuery\'s .eq() method to get the element with a certain index.

$(\'ul li\').eq(index).css({\'background-color\':\'#343434\'});

回答3:

You can use the eq method or selector:

$(\'ul\').find(\'li\').eq(index).css({\'background-color\':\'#343434\'});

回答4:

There is another way of getting an element by index in jQuery using CSS :nth-of-type pseudo-class:

<script>
    // css selector that describes what you need:
    // ul li:nth-of-type(3)
    var selector = \'ul li:nth-of-type(\' + index + \')\';
    $(selector).css({\'background-color\':\'#343434\'});
</script>

There are other selectors that you may use with jQuery to match any element that you need.

回答5:

You could skip the jquery and just use CSS style tagging:

 <ul>
 <li>India</li>
 <li>Indonesia</li>
 <li style=\"background-color:#343434;\">China</li>
 <li>United States</li>
 <li>United Kingdom</li>
 </ul>