How to get attributes values separately for each container present on the webpage in jquery ?

Question

This question is in continuation to How to get attributes of container in jquer, I have different containers on my webpage and all of them have <div id = "some values"> now how can I get attributes values separately for each component ?

Is there any way I can know which attribute id belong to which container div ?

Currently I am using :

var id = $( '.promotion' ).attr( 'id' );

But if I have multiple promotional components on page and all have same div attribute as id than how can I relate that this particular attribute id belonged to this specific container ?

Update: I am having a function which is called for each container present on the page and so if I am using above mentioned code than will it not always return me the first match for id in the div and would never go to other divs and so I will always get same value for id which is for the first container ? If so than what is the work around for this ?

var id = $( '.promotion' ).this.attr( 'id' );


var id = $( '.promotion' ).$this.attr( 'id' );

var id = this.$( '.promotion' ).attr( 'id' );

How would I know if the attribute value is for current container, so how should I use this properly to get this information ?

Hope this question is clear.

Answer 1

You can loop through and process each div individually

$(".promotion").each(function() {
    var id = this.id; // 'this' is the html element, not the jquery object
});

Update

function myfunc() {
   alert(this);
}

// inside myfunc, this will be the window
myfunc(); 
// call (also: apply()) changes "this" to be the first argument
myfunc.call(document.getElementById("someid")); 

Jquery uses this to refer to the current element being processed. In events that would be the target element. In .each it is the current element in the collection.

Consider:

$(".promotion").click(function() { 
   alert(this); // will alert with the div that was clicked
});

In Jquery you can wrap any html element with a JQuery Object by using $(element). So when this is an html element like in the example above you can use $(this):

$(".promotion").click(function() { 
   alert($(this).attr("id")); // will alert with the div that was clicked
});

Play around with it here: http://jsbin.com/okuri3/edit.

More about this:

• http://www.quirksmode.org/js/this.html
• http://remysharp.com/2007/04/12/jquerys-this-demystified/