將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/