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

Question

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

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

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

当屏幕伸展，类不再需要被施加到第三元件，但到第二元件：

有没有什么办法修改上面的jQuery代码来说一些类似的话：将类应用于右边的最后一个元素？

Answer 1

你想用JS，没有母校做些什么呢？

我会做这样的：

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

你去那里。除了添加右边距，只需添加左边距并将容器几个像素向左移动即可。

没有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

有可能是一个更好的办法，但我的本能会看你的主柱的宽度，按项目分（项目）的宽度，这将告诉你每行有多少项目，然后可以将该值输入到第n个选择器中。

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

Answer 4

为什么不处理这个“愚蠢”的方式，并使用此算法：通过所有相关要素

1. 环
2. 基于自己的立场，制定出哪些是最远右
3. 添加对这些元素的类

例如

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