Установить цвет альтернативной строки, используя jQuery?

Question

Я пытаюсь использовать запрос, чтобы установить цвет альтернативных строк таблицы HTML.Но каждый раз, когда я добавляю новый запрос строки, переключается цвет всей таблицы.Вот код Javascript, который я использую:

var alternate = true;
function addRow(data) {
    if(alternate){
        $("table.live_feed").find('tbody.main').prepend(data).css("background", "#f1f1f1");
        alternate = false;
    }else{
        $("table.live_feed").find('tbody.main').prepend(data).css("background", "white");
        alternate = true;
    }
}

PS: я выглядел как некоторые похожие вопросы о переполнении стека, где они меняют цвет нечетных или четных строк.Я не хочу менять цвет уже существующих строк, я хочу изменить только цвет добавляемых новых строк.

Answer 1

Ваш .css действует на найденный элемент (tbody.main), вместо этого вы хотите, чтобы он воздействовал на данные:

var data = $(data).css("background", "#f1f1f1");
$("table.live_feed").find('tbody.main').prepend(data);

В качестве примечания, для чередующихся цветов строк вы можете использовать селекторы :odd и :even

Пример:

$('tr:odd').css('background', 'lightgray');

Answer 2

prepend и append и другие методы вставки DOM возвращают не только что созданные элементы, а объект jQuery, где вы их вызвали.В вашем коде вызов css применяется к объекту tbody.main jQuery.

В этом примере вы можете видеть, как возвращаемый элемент вызова append является элементом div с test id.

http://jsfiddle.net/marcosfromero/VUrhZ/

В этом же примере вы можете увидеть обходной путь для применения css к только что вставленному элементу, используя first() после prepend.