Jquery 修改每个循环中的元素

Question

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

mapcolor 是一个颜色数组（长度 = "item" class 的元素数）

$.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() 方法并将回调函数传递给 return 值。

测试如下：

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>

Answer 2

尝试这样的事情：

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

Answer 3

是的，问题出在您的选择器中... 问题是这样的

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

为什么你将#与e一起使用，因为#代表id .. 但这里 e 代表循环中当前选择的标签

所以只需使用 $(e).css("background-color",mapcolor[i]);以你的方式..

或者使用这个

的更短更好的方法

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

Jquery 修改每个循环中的元素

Jquery modify elements in each loop

each

jquery

loops

selector