How to get nth jQuery element

Question

In jQuery, $("...").get(3) returns the 3rd DOM element. What is the function to return the 3rd jQuery element?

score 372 · Answer 1 · edited Aug 26 '19 at 10:50

372

You can use the :eq selector, for example:

$("td:eq(2)").css("color", "red"); // gets the third td element

Or the eq(int) function:

$("td").eq(2).css("color", "red");

Also, remember that the indexes are zero-based.

edited Aug 26 '19 at 10:50

Stephan

41,764
65
238
329

answered Sep 18 '09 at 06:56

Christian C. Salvadó

807,428
183
922
838

11

As a synonym, you can also use the [`:nth()`](https://github.com/jquery/sizzle/wiki/Sizzle-Documentation#wiki-selectors) selector -- not to be confused with `:nth-child()` – user123444555621 Dec 28 '12 at 13:50
The better answer and not edited 3 years after the fact :) – Andrew Nov 03 '15 at 22:08
thank you for actually explaining how to use the selector/function – Joseph Rogers Apr 20 '16 at 13:17

score 335 · Accepted Answer · edited Jul 06 '19 at 18:18

335

Why not browse the (short) selectors page first?

Here it is: the :eq() operator. It is used just like get(), but it returns the jQuery object.

Or you can use .eq() function too.

edited Jul 06 '19 at 18:18

squaregoldfish

709
8
20

answered Sep 18 '09 at 06:58

Dykam

10,190
4
27
32

23

Isn't that supposed to be `.eq()` instead of `:eq()`? – RubenGeert Apr 06 '14 at 06:52
15

Yes, `.eq()` is more appropriate for the OP's question. `:eq()` is used within the string parameter to `$`, whereas `.eq()` is a method on an existing jQuery object. – mjswensen Apr 16 '14 at 19:46
60

I swear I have to go and look this up *every*. *single*. *time*. – ivarni Jun 21 '14 at 17:51
What about if the returned elements aren't siblings? Like getting an option in an opt group? `$('select').find('option').eq(n)`, doesn't work if options are nested in various opt groups. – Joel Worsham Jan 23 '15 at 19:18
3

@JoelWorsham Depends on the desired behavior. `$('select').find('option').eq(n)` will basically ignore the grouping, and get all options as a whole. If you want it per group, something like this is necessary: `$('select').find('optgroup').each(function() { $(this).find('option').eq(n)...; })` – Dykam Jan 30 '15 at 09:04
2

Amazing how many people upvoted something that actually has the answer in the comments. here is a link to `.eq()` - https://api.jquery.com/eq/ since the answer link takes you to `:eq()` – pathfinder Aug 30 '16 at 16:58
7

"Why not browse the (short) selectors page first?" - Because "eq" is a very bad name and I regularly just skip over it as eq for me means comparison.... – mmlac Nov 04 '16 at 18:52
2

Yes, it would better be named `at()` or `atIndex()` to be discoverable. But the jQuery API design is of low quality in general. – ygoe Dec 19 '17 at 17:03
Remember that eq is zero based, so the first element is :eq(0), and the fifth element is .eq(4) – Magmatic Jun 11 '18 at 17:01
@Dykam if your were to move your comment of _Jan 30 '15 at 9:04_ into the actual answer, and add a couple of examples showing html and resulting selection, it would be _so_ much more helpful. – Ed Randall Nov 14 '19 at 07:07
1

[As of jQuery 3.4, the :eq pseudo-class is deprecated](https://api.jquery.com/eq-selector/). Remove it from your selectors and filter the results later using .eq(). – Ed Randall Nov 15 '19 at 07:38

score 51 · Answer 3 · answered Sep 18 '09 at 07:00

51

if you have control over the query which builds the jQuery object, use :eq()

$("div:eq(2)")

If you don't have control over it (for example, it's being passed from another function or something), then use .eq()

var $thirdElement = $jqObj.eq(2);

Or if you want a section of them (say, the third, fourth and fifth elements), use .slice()

var $third4th5thElements = $jqObj.slice(2, 5);

answered Sep 18 '09 at 07:00

nickf

537,072
198
649
721

1

Was looking for slice, but wasn't sure how to search. Thanks for going beyond what is required in the original question. – Samik R Jan 18 '13 at 22:06
4

For people who stumble on this answer, a helpful point to note is that the nth-child selector is 1 based while :eq or .eq() are 0 based – Sudhanshu Mishra Apr 12 '13 at 05:26
1

You should use `.eq()` instead of `:eq()` actually. Slight performance boost. – Qwerty Aug 12 '14 at 09:00

score 14 · Answer 4 · edited Dec 15 '11 at 11:37

14

I think you can use this

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

It finds the second li in each matched ul and notes it.

edited Dec 15 '11 at 11:37

Didier Ghys

30,396
9
75
81

answered May 13 '10 at 05:57

phagento

410
4
13

tilak · Answer 5 · 2016-09-08T04:37:25.133

11

.eq() -An integer indicating the 0-based position of the element.

Ex:

Consider a page with a simple list on it:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

We can apply this method to the set of list items:

$( "li" ).eq( 2 ).css( "background-color", "red" );

For more information : .eq()

edited Sep 08 '16 at 04:37

answered Nov 08 '13 at 11:28

tilak

4,589
6
34
45

score 4 · Answer 6 · answered Jan 17 '15 at 17:32

4

If you already have the jquery object in a variable, you can also just treat it as a normal indexed array, without the use of jquery:

var all_rows = $("tr");
for(var i=0; i < all_rows.length; i++){
   var row = all_rows[i];
   //additionally, you can use it again in a jquery selector
   $(row).css("background-color","black");
}

Although the above example is not useful in any way, it is representing how you can treat objects created by jquery as indexed arrays.

answered Jan 17 '15 at 17:32

Au.Merci

51
3

Right, and one more (hopefully useful) hint: If row contains a list of ` – Matt Feb 07 '18 at 13:40

score 2 · Answer 7 · answered Sep 30 '14 at 20:53

2

If I understand your question correctly, you can always just wrap the get function like so:

var $someJqueryEl = $($('.myJqueryEls').get(3));

answered Sep 30 '14 at 20:53

user1205577

2,388
9
35
47

3

This is just the "hard way" and this is what `eq()` gives you for free. – Caumons May 13 '15 at 13:51

score 2 · Answer 8 · answered Apr 11 '17 at 03:47

If you want to fetch particular element/node or tag in loop for e.g.

<p class="weekday" data-today="monday">Monday</p>
<p class="weekday" data-today="tuesday">Tuesday</p>
<p class="weekday" data-today="wednesday">Wednesday</p>
<p class="weekday" data-today="thursday">Thursday</p>

So, from above code loop is executed and we want particular field to select for that we have to use jQuery selection that can select only expecting element from above loop so, code will be

$('.weekdays:eq(n)');

e.g.

$('.weekdays:eq(0)');

as well as by other method

$('.weekday').find('p').first('.weekdays').next()/last()/prev();

but first method is more efficient when HTML <tag> has unique class name.

NOTE:Second method is use when their is no class name in target element or node.

for more follow https://api.jquery.com/eq/

score 0 · Answer 9 · answered Mar 28 '13 at 15:23

For iterations using a selector doesn't seem to make any sense though:

var some = $( '...' );

for( i = some.length -1; i>=0; --i )
{
   // Have to transform in a jquery object again:
   //
   var item = $( some[ i ] );

   // use item at will
   // ...
}

score 0 · Answer 10 · answered Feb 25 '14 at 18:43

Live Example to access and remove the Nth element with jQuery:

<html>
<head></head>
<body>
    <script type="text/javascript" 
    src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('li:eq(1)').hide();
      });
    </script>
    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
</body>
</html>

When it runs, there are two items in the ordered list that show, First, and Third. The second was hidden.

P.S. : The count start from 0; First is at index 0, Second is at index 1 and so on .... — KNU, Dec 24 '15 at 08:12

score 0 · Answer 11 · answered Feb 01 '16 at 11:00

0

 $(function(){
            $(document).find('div').siblings().each(function(){
                var obj = $(this);
                obj.find('div').each(function(){
                    var obj1 = $(this);
                    if(!obj1.children().length > 0){
                        alert(obj1.html());
                    }
                });

            });
        });

<div id="2">
    <div>
        <div>
            <div>XYZ Pvt. Ltd.</div>
        </div>
    </div>
</div>
<div id="3">
    <div>
        <div>
            <div>ABC Pvt Ltd.</div>
        </div>
    </div>
</div>

answered Feb 01 '16 at 11:00

Sanjay Verma

397
3
3

"$(function(){" first of fall, i have created anonymous function, which fired automatically. Inside that, i found three parent div using siblings. Then i iterated in all 3 parent div and check the length of every children length. How i can identify that whether is a last div or not in parent div. Now i am alerting the last div html of every 3 main parent div. – Sanjay Verma Feb 01 '16 at 11:00
You can [edit](http://stackoverflow.com/posts/35128846/edit) your answer, instead of giving information in comments :) – T3 H40 Feb 01 '16 at 11:28

How to get nth jQuery element

11 Answers11

Live Example to access and remove the Nth element with jQuery:

Linked

Related