Question

奇怪的小虫子我无法弄清楚，我有以下几行：

$("#ingredientlist").append('<li>' + value + ' parts ' + capitalize(index + '') + '</li>').css("color", curColor);

基本上，在之前的陈述中我得到curColor，这取决于我所处的价值。我检查了颜色，每次都有不同的颜色。我希望每个<li>被设置为特定颜色，所以我尝试将.css（）设置为，但我的所有条目都是相同的颜色。有什么想法吗？

由于

Answer 1

目前，您要将li追加到$("#ingredientlist")，然后设置其color

您需要设置li的颜色而不是其父颜色。

使用

$("#ingredientlist").append(
    $('<li></li>')
        .text(value + ' parts ' + capitalize(index + ''))
        .css("color", curColor)
);

Answer 2

问题是因为append()返回父元素，而不是附加的元素。这意味着您的代码实际上是设置color元素的#ingredientlist，而不是li。试试这个：

$('<li  />', { text: value + ' parts ' + capitalize(index + '') })
    .css('color', curColor)
    .appendTo('#ingredientlist');

Answer 3

您正在对.css集合应用#ingredientlist来电，而不是您要追加的li。

相反：

$("#ingredientlist").append($('<li>' + value + ' parts ' + capitalize(index + '') + '</li>').css("color", curColor));
// Changes -----------------^^-------------------------------------------------------------------------------------^

将其分解为部分只是为了让它更清晰：

var $li = $('<li>' + value + ' parts ' + capitalize(index + '') + '</li>');
$li.css("color", curColor);
$("#ingredientlist").append($li);

使用JQuery </li>以不同的方式设置每个<li>的样式

3 个答案: