примените подходящее чередование зебры к добавленным элементам DOM с помощью jQuery - PullRequest
Новая
       32

примените подходящее чередование зебры к добавленным элементам DOM с помощью jQuery

2 голосов
/ 20 сентября 2011

Я использую 

$(".entry").filter(":odd").addClass('alt');

в пределах $(document).ready(), чтобы облегчить чередование зебры со всем классом 'entry'.

В процессе взаимодействия со страницей новые элементы DOM с классом 'entry' добавляются один за другим в конце. Я хотел бы использовать что-то похожее на вышеприведенное, чтобы убедиться, что у вновь добавленной записи есть соответствующий цвет фона, то есть цвет, противоположный тому, который предшествовал «записи».

Я не могу придумать элегантный (или вообще какой-то) способ сделать это. Есть идеи? Есть ли что-то аналогичное .live(), которое применило бы это правило ко всем текущим и будущим матчам?

UPDATE

edit: перенесено обновление в ответ

Ответы [ 4 ]

0 голосов
/ 15 марта 2012

Это решение не так элегантно, как отвечает CSS, но оно делает именно то, что мне нужно, без каких-либо отвлекающих побочных эффектов:

Сначала я добавлю это в конец DOMappend: 

$('#articles').append('putyourDOMelementinhere').addClass('new');

Затем у меня есть неуклюжий условный оператор, чтобы проверить, имеет ли предыдущая запись класс 'alt', и если нет, я использую .addClass('alt').Затем я очищаюсь, вытаскивая «новый» класс: 

 if(!$('.new').prev().hasClass('alt')){
  $('.new').addClass('alt');
 }
 $('.new').removeClass('new');

Я уверен, что гуру jQuery могли бы придумать гораздо более сексуальное решение, но это, кажется, делает то, что я имел вум.

0 голосов
/ 20 сентября 2011

Один из способов будет запускать 

$(".entry").filter(":odd:not(.alt)").addClass('alt');

всякий раз, когда вы добавляете новые элементы ..

Более правильным является обработка этого с помощью CSS 

.entry:nth-child(odd){
//styling of the .alt goes here
}

и это будет работать для новых элементов ..

0 голосов
/ 20 сентября 2011

Вы можете просто вызывать функцию фильтра при каждом обновлении таблицы. 

$(document).ready(function() {
    $('tr').filter(':odd').addClass('alt');

    $('#adder').click(function() {
        $('tbody').append('<tr><td>Item 1</td><td>Item 2</td></tr>');
        $('tr').filter(':odd').addClass('alt');
    });
});

пример JSFiddle: http://jsfiddle.net/Gvdcv/

0 голосов
/ 20 сентября 2011

Демонстрация в реальном времени

Вы можете попробовать следующее с простым CSS. 

.entry:nth-child(odd){
    /* do some styling */
}
...