1

我有一个媒体库。出于某种奇怪的原因，设计师决定将这些媒体项目以 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循环。

4

4 回答 4

2

一种选择是：

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

JS 小提琴演示。

然后使用元素的类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 小提琴演示。

于 2011-07-23T17:15:40.897 回答
0

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

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

或者

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

取决于您是要解决直接孩子还是所有后代，在这种情况下删除>角色。

于 2011-07-23T17:02:00.120 回答
0

您可以使用 eq()。例如

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

选择第三行的第 6 个“td”。您可以将其与一些逻辑结合起来计算 eq 的索引以选择每三行

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

于 2011-07-23T17:02:13.093 回答
0

我假设你使用 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;
}

这是一个工作示例，我猜测您的 CSS 其余部分的简化版本会是什么样子。如果您想为 IE 进行 polyfill，相同的选择器将在 jQuery 中工作，但我建议您在条件注释中这样做，以免在其他浏览器上浪费时间。

于 2011-07-23T20:25:51.403 回答