CODEWITHSUNDEEP
jqueryloopseachselector
Abspirit
Abspirit

Reputation: 35

Jquery modify elements in each loop

Using jquery, I want to loop all elements having the class "item" and apply different background colors according to the index of the element.

mapcolor is an array of colors (length = number of elements having "item" class)

$.each($(".item"), function(i,e){
$("#"+e).css("background-color",mapcolor[i]);
});

$("#"+e) selector doesn't work as expected, neither $("#"+e.id) ... Something's wrong with my selector. Any idea?

Upvotes: 3

Views: 7956

Answers (3)

Jai
Jai

Reputation: 74738

use .each() method instead and you have to be in the context with $(this): 

$(".item").each(function(i){
  $(this).css("background-color",mapcolor[i]);
});

Yet a better way is: 

$(".item").css("background-color",function(){
    return mapcolor[$(this).index()];
});

make use of .css() method and pass a callback function to return the value.

A test is below: 

var mapcolor = ['green', 'red', 'yellow'];

$(".item").css("background", function() {
  return mapcolor[$(this).index()];
});
div{height:10px;}
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 5

Zebi Rajpot
Zebi Rajpot

Reputation: 186

yes problem is in your selector ... problem is on this like

$("#"+e).css("background-color",mapcolor[i]);

why you using # with e because # represent id .. but here e is representing current selected tag in loop

so simply use $(e).css("background-color",mapcolor[i]); in your way..

or short and better way use this 

$(".item").each(function(i){
    $(this).css("background-color",mapcolor[i]);
});

Upvotes: 3

Deepak Biswal
Deepak Biswal

Reputation: 4320

Try something like this:

$( ".item" ).each(function(i) {
  $(this).css("background-color",mapcolor[i]);
});

Upvotes: 0

Related Questions