CODEWITHSUNDEEP
javascriptjqueryobjectdom
nowiko
nowiko

Reputation: 2557

Get index of element in array jQuery

I has an array of objects $('selector'), I want to get index() of each element and append it to the html of each elemt. I can get index of first element just write $('selector').index(), but how I can get other, and append them to they DOM-objects. Help, I am new in Javascript and jQuery.

Upvotes: 1

Views: 6060

Answers (8)

George
George

Reputation: 36784

You can pass a function to the .html() jQuery method. This function will conveniently be called with two parameters, the element index and the current HTML, so what you want is easy:

$elements.html(function(i, v){
   return v + i; 
});

JSFiddle

Which will give you the index relative to the selection made. If you wanted the index relative to each elements siblings, you would need .index():

$('ul li').html(function(_, v){
   return v + $(this).index();
});

JSFiddle

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You can also use eq:

$('selector').each(function(){
  $(this).html('index for this html is ' + $(this).eq());
});

Upvotes: 0

DrRoach
DrRoach

Reputation: 1356

Try:

$.each($('selector'), function() {
    $(this)append($(this).index());
});

Upvotes: 0

Dropout
Dropout

Reputation: 13866

Just cycle through them and the iterator will tell you it's index.

var array = $('.someClass');
for(var i=0; i<array.length; i++){
    console.log('Element #' + i + ': ' + $(array[i]).text());
}

Upvotes: -1

Apul Gupta
Apul Gupta

Reputation: 3034

You should iterate using .each

Sample Code:

$("selector").each(function(i, v) {
  $(this).append(i);
});

Upvotes: -1

UserDy
UserDy

Reputation: 357

Use .each() to select each element, get each index and append each index to all elements matching the selector.

$("selector").each(function(index) {

   var eachIndex = $(this).index();

   $(this).append(eachIndex);

});

Upvotes: 0

Amir Popovich
Amir Popovich

Reputation: 29836

Use JQuery.each:

$('selector').each(function(index) {
  console.log(index);
});

Example:

Html:

<div>My Div</div>
<div>My Div</div>
<div>My Div</div>
<div>My Div</div>
<div>My Div</div>
<div>My Div</div>
<div>My Div</div>
<div>My Div</div>
<div>My Div</div>

JS:

$('div').each(function(index){
    var newHtml = $(this).html() + " - Index:" + index;
    $(this).html(newHtml);
});

Output:

My Div - Index:0
My Div - Index:1
My Div - Index:2
My Div - Index:3
My Div - Index:4
My Div - Index:5
My Div - Index:6
My Div - Index:7
My Div - Index:8

JSFiddle.

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

Try this...

$("selector").each(function(i) {
    $(this).html($(this).html() + " " + i);
});

i will be the index of each selected element and will be appended to the html.

Here's a jsfiddle example...

http://jsfiddle.net/54bcn68j/

Upvotes: 3

Related Questions