Question

我有一个媒体库。出于一些奇怪的原因，设计师决定将这些媒体项目放在12个块中。每行三行，四个项目，然后是一个间隙。

现在我不想在每个块的父列表中放置12个项目的列表。我认为这可以通过jQuery过滤轻松处理，在每个上面添加一个类每三行一项。

我知道如何定位每个:nth(4)项目，列表中的每四个项目，但我如何处理第三行中的每个项目？

我可以使用哪种过滤器？

下面列出了标记。所有项目都只是无序列表中的浮动元素。

<ul>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
</ul>

浮动，每行适合四项。所以我需要针对第9,10,11和12项，但还需要三行，项目21,22,23,24再次......

我认为我可以在.filter(function(){});中进行一些漂亮的计算，但我还没有接近正确的答案......

我想要的东西在我刚刚制作的这个jsfiddle中实际可见：http://jsfiddle.net/DpMRc/5/ **

我希望使用.filter()函数定位蓝框，而不是为它编写整个for循环。

Answer 1

一个选项是：

$('tbody tr').filter(
    function(i){
        if ((i+1)%3 == 0){
            return this;
        }
    }).addClass('black');

JS Fiddle demo

然后使用tr元素的类以某种方式设置子项的样式：

.black td {
    /* css for the td elements that are children of the tr with the class of 'black' */
}

或者您可以使用：

$('tbody tr').filter(
    function(i){
        if ((i+1)%3 == 0){
            return this;
        }
    }).children().addClass('black');

JS Fiddle demo

Answer 2

您可以在选择器中使用*吗？或特定标签？

$('table tr:nth-child(3) > *')....

或

$('table tr:nth-child(3) > td')...

取决于你是否要解决直接的孩子或所有后代，在这种情况下删除>字符。

Answer 3

您可以使用eq（）。例如

$('table tr:eq(3) td:nth-child(6)').each(function() {
    $(this).css('background-color', 'yellow')
});

选择第三行的第6个'td'。您可以将其与某些逻辑组合以计算eq的索引以选择每第三行

小提琴：http://jsfiddle.net/u2Ru3/

Answer 4

我认为你使用的是jQuery，因为你需要IE8支持，但在所有其他浏览器（包括IE9）中，你可以只用CSS做到这一点：

li:nth-child(12n+9), li:nth-child(12n+10), li:nth-child(12n+11), li:nth-child(12n+12) {
    border-bottom: 4px solid red;
}

Here's a working example，我猜测了CSS其余部分的简化版本。如果你想为IE填充polyfill，那么相同的选择器将在jQuery中工作，但我建议你在条件注释中这样做，以免在其他浏览器上浪费时间。

使用jQuery过滤在第三行中的每个列表项上放置一个类

4 个答案: