Question

使用jquery，我想循环所有具有类＆＃34; item＆＃34;的元素。并根据元素的索引应用不同的背景颜色。

mapcolor是一个颜色数组（长度=具有＆＃34的元素数量;项目＆＃34;类）

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

$("#"+e)选择器没有按预期工作，$("#"+e.id) ... 我的选择器出了点问题。有什么想法吗？

Answer 1

使用.each()方法，您必须使用$(this)进入上下文：

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

更好的方法是：

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

使用.css()方法并传递回调函数以返回值。

测试如下：

＆＃13;

var mapcolor = ['green', 'red', 'yellow'];

$(".item").css("background", function() {
  return mapcolor[$(this).index()];
});

＆＃13;

div{height:10px;}

＆＃13;

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

＆＃13;

Answer 2

是问题在你的选择器中...... 这个问题就像

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

为什么你使用#with e，因为＃代表id .. 但这里e表示循环中当前选定的标签

所以简单地使用$（e）.css（“background-color”，mapcolor [i]）;在你的方式..

或简短且更好的方式使用此

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

Answer 3

尝试这样的事情：

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

Jquery修改每个循环中的元素

3 个答案: