How to access specific object in an array of DOM objects in jQuery?

Question

Ok so I wanna ask a simple jQuery question about arrays of objects.

If I get all elements (for example all paragraphs) from an html page and store them in an array how can I access one of them to do stuff with it?

For example let's say I have this html:

<!DOCTYPE html>
<html>
    <head>
        <title></title> 
    </head>
    <body> 
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <button id="myButton">Click here</button>

    <script src="jquery-1.6.2.min.js"></script>
    <script src="script.js"></script>
    </body>
</html>

This is my script.js:

$(document).ready(function(){
    $("#myButton").click(function(){

        var $paragraphs = $("p"); 
        $paragraphs.detach();  //Works fine, removes all elements
        //$paragraphs[0].detach();  //Doesn't work!

    }); 
});

I'm trying to call detach on the first element of the array, so that I can remove the first paragraph but it doesn't seem to work...

Is there any way to access the first paragraph without using id attributes?

Bennett McElwee · Accepted Answer · 2012-12-18 23:56:33Z

3

You can use the :eq selector to select the first element:

$("p:eq(0)").detach();

This will detach just the first element.

You could instead use the .eq() function, which may offer better performance:

$("p").eq(0).detach();

edited Dec 18, 2012 at 23:56

answered Dec 18, 2012 at 23:50

Bennett McElwee

26k6 gold badges56 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bennett McElwee · Accepted Answer · 2012-12-19 04:42:02Z

0

Try this

$($paragraphs[0]).detach();

When you pass a index to the jQuery Object List $paragraphs[0] , the object becomes a DOM Object

var $paragraphs = $("p"); 

var domObj = $paragraphs[0];

var jqueryObj = $(domObj);

So you need to wrap it again as a jQuery Object ..

Instead you can use the :eq() selector

var $paragraph = $("p:eq(0)");  // Selects only the first para
                                 // which is a jQuery Object
$paragraph.detach();   // This works too

edited Dec 19, 2012 at 4:42

Bennett McElwee

26k6 gold badges56 silver badges65 bronze badges

answered Dec 18, 2012 at 23:49

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

Bennett McElwee Over a year ago

The eq() function may be faster, as I mentioned in my answer.

Travis J · Accepted Answer · 2012-12-18 23:48:17Z

0

$paragraphs[0] will unwrap the jquery object into the html element which is why you cannot access detach ( a jquery function ).

You should either iterate through the paragraphs, or re-wrap the object. This should work

var detachParagraph = $paragraphs[0];
$(detachParagraph).detach();

answered Dec 18, 2012 at 23:48

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Comments

frabjousB · Accepted Answer · 2012-12-19 00:04:56Z

-1

You can use a filter function: $("p").filter(function(index){ if(index==0){ $(this).detach(); } )};

answered Dec 19, 2012 at 0:04

frabjousB

1043 bronze badges

1 Comment

Bennett McElwee Over a year ago

-1 for being too cumbersome. Use eq as mentioned by other answers.

Collectives™ on Stack Overflow

How to access specific object in an array of DOM objects in jQuery?

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related