Question

是否可以在.each（）函数中为每个结果编写单独的代码？

我想在the example中做的是让每个订单项都有独特的颜色。这可以在.each（）中完成吗？

$(document).ready(function() {    
    $('li').each(function() {
        $(this).css('color', 'purple');
    }); 
// End it all    
});

http://jsfiddle.net/rJGYL/

修改：为了更简洁，是否可以为每个项目添加唯一的CSS？不仅仅是一种颜色，而是说我希望第一个项目的字体粗体为粗体，下一个项目为斜体...

Answer 1

$(document).ready(function() {

var colors = ['red','green', 'blue', 'pink']

    $('li').each(function(i) {
        $(this).css('color', colors[i]);
    });


// End it all    
});

JSFiddle：http://jsfiddle.net/lucuma/aU4kr/

您可以使用每个函数中的索引来引用数组。如果您想了解更多详细信息，可以在此处找到：http://api.jquery.com/each/

Answer 2

是的你可以使用以下代码

来做到这一点

$(document).ready(function() {
  var colors = ['black','red','purple','yellow']
    $('li').each(function(i) {
        $(this).css('color', colors[i]);
    });


// End it all    
});

Working Fiddle

将您的颜色放在colors数组中。

<强>更新

您可以为数组中的每个li定义不同的css，如下所示

$(document).ready(function() {
    var css = [{'font-weight':'bold','font-size':'25px','color':'red'}
               ,{'color':'purple'},{'color':'black'},{'color':'yellow'}]
    $('li').each(function(i) {
        $(this).css(css[i]);

    });


// End it all    
});

Working Fiddle

您已在css对象数组中将'key':'value'属性定义为css对。

Answer 3

您可以指定可用颜色数组，然后使用每个项目的索引从该数组中选择：

http://jsfiddle.net/rJGYL/2/

$(document).ready(function() {
    var colors = ["purple", "red", "blue", "yellow"];

    $('li').each(function(index) {
        $(this).css('color', colors[index]);
    });


    // End it all    
});

Answer 4

var colors= ['red','green', 'blue'];

$('li').css('color', function() {
    return colors[i];
});

.each（）中单个项目的唯一操作

4 个答案: