Question

我正在使用

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

在$(document).ready()内，以便通过课程“入口”促进斑马条纹。

在与页面交互的过程中，具有类“entry”的新DOM元素在结尾处逐个附加。我想使用类似于上面的内容来确保新添加的条目具有适当的背景颜色，这意味着它之前的任何“条目”的颜色相反。

我无法想到这样做的优雅（或任何）方式。有任何想法吗？是否有类似.live()的内容将此规则应用于所有当前和未来的匹配？

更新

编辑：移动更新以回答

Answer 1

<强> Live Demo

您可以使用简单的CSS尝试以下操作。

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

Answer 2

一种方法是运行

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

每当你追加新元素时......

更正确的是通过CSS

来处理这个问题

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

这也适用于新元素..

Answer 3

只要更新表格，就可以调用过滤器功能。

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

Answer 4

这个解决方案并不像CSS答案那么优雅，但它完全符合我的需要而没有任何分散注意力的副作用：

首先，我将它链接到DOM附加的尾端：

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

然后我有一个笨拙的条件语句来检查前一个条目是否具有'alt'类，如果没有，我使用.addClass('alt')。然后我通过摘下“新”课来清理：

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

我确信那里的jQuery大师可以提出一个更性感的解决方案，但这似乎就是我想到的。

使用jQuery将适当的斑马条纹应用于附加的DOM元素

4 个答案: