CODEWITHSUNDEEP
jquery
Sam Lee
Sam Lee

Reputation: 7199

How to get nth jQuery element

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

Upvotes: 376

Views: 326584

Answers (11)

Christian C. Salvadó
Christian C. Salvadó

Reputation: 827256

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.

Upvotes: 387

Dykam
Dykam

Reputation: 10290

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.

Upvotes: 337

Vrushal Raut
Vrushal Raut

Reputation: 1208

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/

Upvotes: 2

tilak
tilak

Reputation: 4691

.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()

Upvotes: 11

Sanjay Verma
Sanjay Verma

Reputation: 417

 $(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>

Upvotes: 0

Au.Merci
Au.Merci

Reputation: 51

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.

Upvotes: 4

user1205577
user1205577

Reputation: 2450

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

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

Upvotes: 2

Eric Leschinski
Eric Leschinski

Reputation: 153852

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.

Upvotes: 0

user1115652
user1115652

Reputation:

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

Upvotes: 0

phagento
phagento

Reputation: 412

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.

Upvotes: 14

nickf
nickf

Reputation: 546015

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

Upvotes: 53

Related Questions