apply appropriate zebra striping to appended DOM elements with jQuery

Question

I'm using

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

within $(document).ready() to facilitate zebra striping of everything with class 'entry'.

In the course of interacting with the page, new DOM elements with class 'entry' are appended one-by-one at the end. I'd like to use something similar to the above to make sure the newly appended entry has the appropriate background color, meaning the opposite color of whatever 'entry' preceded it.

I can't think of an elegant (or really any) way to do this. Any ideas? Is there something analogous to .live() that would apply this rule to all current and future matches?

UPDATE

edit: moved update to answer

Some have already stated CSS would be better, but if you are tied to JavaScript then I would make the addClass call in a standalone function that you call when you append the elements to the DOM — Seth, Sep 19 '11 at 20:28
Okay the CSS solutions are definitely the most elegant. And technically it works, but I forgot to mention that while one element is appended at the bottom, the top element is removed (slides up). The net effect is that the total number of 'entries' remains constant. The CSS solution causes a bit of a jarring effect at this point when **all** elements swap their BG color once the slideUp animation is complete. I think I'll have to go with a jQuery solution (pending) to ensure that only the appended element is changed, unless anyone else knows how to achieve it w/ CSS. — Jake, Sep 19 '11 at 20:46

score 0 · Answer 1 · answered Sep 19 '11 at 20:27

0

Live Demo

You could try the following with just simple CSS.

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

answered Sep 19 '11 at 20:27

Loktar

34,764
7
90
104

score 0 · Answer 2 · answered Sep 19 '11 at 20:27

One way would be to run

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

whenever you append at new elements..

A more correct is to handle this through CSS

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

and this will work for new elements as well..

score 0 · Answer 3 · answered Sep 19 '11 at 20:31

you can just call the filter function whenever you update the table.

$(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');
    });
});

example JSFiddle: http://jsfiddle.net/Gvdcv/

score 0 · Accepted Answer · answered Mar 14 '12 at 22:15

This solution isn't nearly as elegant as the CSS answers, but it does exactly what I need it to without any of the distracting side effects:

First I chain this on the tail end of the DOM append:

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

Then I have a clumsy conditional statement to check whether the previous entry has the 'alt' class, and if it doesn't, I use .addClass('alt'). Then I clean up by plucking off the 'new' class:

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

I'm sure the jQuery gurus out there could come up with a much sexier solution, but this seems to do just what I had in mind.

apply appropriate zebra striping to appended DOM elements with jQuery

4 Answers4