Get index of element in array jQuery

Question

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.

Answer 1

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/

Answer 2

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

Answer 3

Use JQuery.each :

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

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 .

Answer 4

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

});

Answer 5

Try:

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

Answer 6

You can also use eq:

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

Answer 7

You should iterate using .each

Sample Code:

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

Answer 8

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