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.

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.

• javascript
• jquery
• object
• dom

Share Improve this question Follow asked Oct 20, 2014 at 11:11 nowikonowiko 2,57777 gold badges4040 silver badges8787 bronze badges 2

• You can use .each() – Regent Commented Oct 20, 2014 at 11:12
• 1 Thanks you guys, i appreciate yours help) – nowiko Commented Oct 20, 2014 at 11:25

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 3

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/54bcn68j/

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

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.

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

});

Try:

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

You can also use eq:

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

You should iterate using .each

Sample Code:

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

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