将CSS样式应用于右边的最后一个元素？

Question

我使用此代码删除第三个元素（缩略图）的边距：

$j('.project:nth-child(3n)').addClass('odd-element');

我开始使用媒体查询来准备网站移动设备，但我遇到了这个问题：

当屏幕伸展时，不再需要将类应用于第三个元素，而是应用于第二个元素：

有没有办法修改上面的jQuery代码来说出类似的内容：在右边的最后一个元素中应用class tot？

Answer 1

你想用JS做这件事，不管是什么？

我会这样做：

.project { float:left;margin-left:20px }
.projectParent { margin-left:-20px }

你去吧。不要添加右边距，只需添加左边距并将容器向左移动几个px。

没有涉及js！

//编辑：哦，是的，你摆脱了所有灵活的盒子问题！

Answer 2

我会按照以下方式做点什么：

$j(function() {

    if($j(window).width() < 500) {

        $j('.project').removeClass('odd-element');
        $j('.project:nth-of-type(2n)').addClass('odd-element');

    });

});

Answer 3

为什么不以'哑'方式处理这个并使用这个算法：

1. 遍历所有相关元素
2. 根据他们的位置，找出最右边的
3. 将类添加到这些元素

E.g。

$(function() {
    var max = 0;

    $('li').each(function() {
        max = $(this).offset().left > max ? $(this).offset().left : max;
    });

    $('li').each(function() {    
        if ($(this).offset().left == max)
        {
            // add your class here - this is just an example
            // for the purposes of demo'ing
            $(this).css('margin-left', 0);
        }
    });
});

请参阅 http://jsfiddle.net/S9TpX/1/

Answer 4

可能有更好的方法，但我的直觉是查看你的主列宽度，除以项目（项目）宽度，这将告诉你每行有多少项，然后你可以将该值提供给你的第n个选择器。

如果没有看到您的网页结构，就无法真正显示任何代码。