应用适当的斑马条纹图案，用jQuery

附加DOM元素我使用应用适当的斑马条纹图案，用jQuery

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

内$(document).ready()，以方便与一切阶级“入口”的斑马条纹。

在与页面进行交互的过程中，带有“入口”类的新DOM元素在最后一个接一个地附加。我想使用类似于上面的内容来确保新添加的条目具有适当的背景色，这意味着与之前的任何“条目”相反的颜色。

我想不出一个优雅的（或者真的有）这样做。有任何想法吗？有没有类似于.live()的东西可以将此规则应用于所有当前和未来的比赛？

UPDATE

编辑：移动更新回答

来源

2011-09-19 Jake

可以使用css代替。 – Loktar

有些人已经声明CSS会更好，但如果你绑定到JavaScript，那么我会在你将元素附加到DOM时调用的独立函数中进行addClass调用 – Seth

好的CSS解决方案绝对是最优雅的。从技术上讲，它可以工作，但我忘了提到，虽然一个元素被添加到底部，顶部元素被删除（向上滑动）。最终结果是“条目”的总数保持不变。一旦slideUp动画完成，当** all **元素交换它们的BG颜色时，CSS解决方案在此时会引起一些不和谐的效果。我认为我必须使用jQuery解决方案（挂起）来确保只有附加元素被更改，除非其他人知道如何使用CSS实现它。 – Jake

该解决方案是几乎没有的CSS的答案优雅，但它正是我需要它没有任何的分心的副作用：

第一我链接在DOM的尾部追加：

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

然后我有一个笨拙的条件语句来检查上一个条目有'alt'类，如果没有，我使用.addClass('alt')。然后，我收拾通过拔断“新”类：

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

我敢肯定，jQuery的大师那里能想出一个更性感的解决方案，但这似乎怎么做我的初衷。

来源

2012-03-14 22:15:33 Jake

Live Demo

你可以尝试只用简单的CSS以下。

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

来源

2011-09-19 20:27:11 Loktar

一种方法是运行

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

，只要你在添加新的元素..

更准确的是通过CSS

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

这来处理这将为新元素工作。

来源

2011-09-19 20:27:48

无论何时更新表格，您都可以调用过滤器函数。

$(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/

来源

2011-09-19 20:31:06 GSto

应用适当的斑马条纹图案，用jQuery

回答

相关问题