jQuery index on each function

Question

I am curious why I need this index

$(document).ready(function() {
        $(".divToggle").each(function(index){
            var buttonId = $(this)[0].attributes["id"].value.toString();
            var idParts = buttonId.split('_');
            var uniquePart = idParts[0] + "_" + idParts[1] + "_" + "divContentPanel";             
            $(this).click(function() {
                 $("#" + uniquePart).toggle("slow");
            });            
        });
    });

Why do I need the "[0]" in "var buttonId = $(this)[0]…" Without it, I get an attributes["id"] is null error..

Sang Suantak · Accepted Answer · 2011-08-18 15:13:22Z

4

Use this instead

var buttonId = this.id;

or jQuery way

var buttonId = $(this).attr("id");

answered Aug 18, 2011 at 15:13

Sang Suantak

5,2652 gold badges30 silver badges46 bronze badges

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

Comments

Matt · Accepted Answer · 2011-08-18 15:16:15Z

2

with $(this) you are still in the jquery model where the correct way to get id is .attr("id")

writing $(this)[0] drops you back into the DOM model where its as you wrote.

answered Aug 18, 2011 at 15:16

Matt

3,8503 gold badges32 silver badges33 bronze badges

Comments

ipr101 · Accepted Answer · 2011-08-18 15:17:54Z

2

$(this)[0]

Is doing 2 things -

Getting you the first element in the matched set, as you're looping round a set of results one by one the index is probably redundant in this case
Returning a 'normal' JavaScript DOM object rather than a jQuery wrapped object

Looking at your code I believe you could achieve the same result by doing this -

var buttonId = this.id;

answered Aug 18, 2011 at 15:17

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

Comments

ant_Ti · Accepted Answer · 2011-08-18 15:18:27Z

1

$(".divToggle").each(function(index, element){
    var buttonId = element.id,
        idParts = buttonId.split('_'),
        uniquePart = idParts[0] + "_" + idParts[1] + "_" + "divContentPanel";

    $(element).click(function() {
         $("#" + uniquePart).toggle("slow");
    });            
});

answered Aug 18, 2011 at 15:18

ant_Ti

2,42518 silver badges14 bronze badges

1 Comment

esastincy Over a year ago

This is a really cool solution, it is actually what I ended up using in my code. thanks

Rafay · Accepted Answer · 2011-08-18 15:14:41Z

1

try

 var buttonId = $(this).attr("id");

answered Aug 18, 2011 at 15:14

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Comments

Joseph Marikle · Accepted Answer · 2011-08-18 15:15:32Z

1

Technically you don't need it with a little modification of your code. What happens with jQuery selectors is they are simply a bunch of element references in an array. so instead of

<div id ="myelement"></div>

you get

[<div id ="myelement"></div>]

using $(this) puts this in an array and allows it to be used with jQuery functions. If you aren't using jQuery functions just use this. So your code would become

var buttonId = this.attributes["id"].value.toString();

answered Aug 18, 2011 at 15:15

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Collectives™ on Stack Overflow

jQuery index on each function

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related