jquery - zebra stripes css for dynamical list item

Question

I can't change my html because this is the hack for me to do something (sorting algo), however it broke my css because I can't use even and odd anymore..

http://jsfiddle.net/Hms7Y/24/

try to add 1 and then follow by 2, it has the same background.. I tried to apply 3 classes for 3 li, doesn't work because there are various behaviour by users.

li:nth-child(even){
background:#DDD;    
}

Answer 1

http://jsfiddle.net/kidino/JRwM7/1/

只需使用 :visible 过滤 js 中隐藏的 li

  $('ul li').removeClass('even');
  $('ul li:visible:odd').addClass('even');

Answer 2

试试这个：小提琴。

$(document).ready(function() {
  $('button').click(function() {
    var lvl = $('select').val();

    $('<li class="level" '+ lvl + '>' + lvl + '</li>').appendTo('ul');
  });
});