Динамическая вставка предметов, втирающих полосу зебры

Question

У меня есть простой список продуктов, где полоса зебры достигается с использованием метода cycle.

Вот продукт частичный:

<tr class="product <%= cycle 'odd', 'even' %>"> 
    <td><%= product.name %></td> 
    <td><%= product.price %></td> 
    <td><%= product.percentage %></td> 
    <td><%= link_to "Show", product %></td> 
    <td><%= link_to "Edit", edit_product_path(product), :remote => true %></td> 
    <td><%= link_to "Destroy", product, :confirm => 'Are you sure?', :method => :delete, :remote => true %></td> 
</tr> 

Однако, когда я динамически вставить другой продукт, метод цикла логически выбирает первый класс (в данном случае «нечетный» класс), таким образом, нарушая чередование до следующей перезагрузки. Хотя динамическая перезагрузка всего продукта будет работать; этот метод кажется несколько грязным и, скорее всего, будет беспорядочным с разбиением на страницы. Поскольку я по-прежнему относительно не знаком с JavaScript и прототипом, я не могу это сделать сам по себе, поэтому я должен спросить: есть ли способ получить класс предыдущего продукта («нечетный» или «четный») и соответственно добавить класс к вновь вставленному продукту?

Мой текущий UJS используется для вставки парциальное:

Modalbox.hide(); 

function insertProduct() { 
    $('products').insert({ top: "<%= escape_javascript(render @product) %>" }); 
    $$('.product').first().highlight(); 
} 

insertProduct.delay(0.8); 

Любая помощь будет оценена.

Заранее спасибо.

Answer 1

Ionut Staicu по существу прав, но забыл о прототипе. Окончательный ответ должен быть;

$$('.product').invoke('removeClassName', 'odd') 
       .invoke('removeClassName', 'even') 
       .first().highlight(); 
$$('.product:even').invoke('addClassName', 'even'); 
$$('.product:odd').invoke('addClassName', 'odd'); 

Answer 2

После вставки элементов, вам необходимо удалить все класс odd и even:

$('tr.product').removeClass('odd even'); 

Затем вам нужно добавить классы снова:

$('tr.product:even').addClass('even'); 
$('tr.product:odd').addClass('odd'); 

так что код будет выглядеть следующим образом:

[...] 
$$('.product').first().highlight(); 
$('tr.product').removeClass('odd even'); 
$('tr.product:even').addClass('even'); 
$('tr.product:odd').addClass('odd'); 
} 

Answer 3

В jQuery я делаю это вот так:

$('#product-<%= @product.id %> ~ .product').each(function(index) { 
    $(this).toggleClass('odd'); 
    $(this).toggleClass('even'); 
}); 

Селектор говорит: найти продукт с идентификатором «продакт-XX», то для каждого следующего элемента, который имеет класс продукт, переключение класса четные и нечетные (удалить его, если он присутствует, и добавьте его, если это не).

Answer 4

Если бы я делал это, и если бы я мог рассчитывать на каждой строке быть фиксированной высоты, я бы, вероятно, использовать полосатую фоновое изображение вместо этого. Это не позволяет использовать разные цвета переднего плана или любое свойство CSS, чем фон. Тем не менее, это было бы очень надежно.