过滤块 + 为每个第三个元素添加一个类

Question

我正在使用由 Chris Coyier 编写的 Filtering Blocks 代码，但我想在每三个“块”元素中添加一个类“last”（以删除 margin-right）。 到目前为止，我有这个：

HTML

<div id="blocks-nav">
     <a rel="all" class="current">All</a>
     <a rel="www">Internet</a>
     <a rel="ci">Logo</a>
</div>

<div id="blocks-gropup">
     <div class="block all www">
     <!-- some content -->
     </div>

     <div class="block all ci">
     <!-- some content -->
     </div>

     <div class="block all www">
     <!-- some content -->
     </div>

     <div class="block all ci">
     <!-- some content -->
     </div>

     <div class="block all ci">
     <!-- some content -->
     </div>

     <div class="block all www">
     <!-- some content -->
     </div>         

</div>

jQuery：

$(function() { var newSelection = ""; $("#blocks-nav a").click(function(){ $("#blocks-nav").fadeTo(200, 0.10); $("#blocks-nav a").removeClass("current"); $(this).addClass("current"); newSelection = $(this).attr("rel"); $("div.block").not("."+newSelection).slideUp(); $("."+newSelection).slideDown(); $("#blocks-group").fadeTo(600, 1); }); }); $("div#blocks-group > div:nth-child(3n)").addClass('last');

最后一行确实有效，并为每个第三个 div 添加了一个“last”类，但在过滤块之后，该类保持相同的 div，这在第三个位置不是必需的。 所以，我的问题是 - 如何合并这两个函数，以便在页面加载时将类添加到每三个 div，然后在过滤块后删除并再次添加。

任何帮助或帮助将不胜感激！

Answer 1

稍有疏忽，过滤需要隐藏元素，因此表达式“nth-child(3n)”在过滤后根本不起作用。代码也很容易修复，见下文：

$(function() {

    var newSelection = "";

    $("#blocks-nav a").click(function(){

        $("#blocks-group").fadeTo(200, 0.10);

        $("#blocks-nav a").removeClass("current");
        $(this).addClass("current");

        newSelection = $(this).attr("rel");

        $("div.block")
            .removeClass("last")
            .not("."+newSelection)
            .slideUp();

        $("div.block."+newSelection)
            .slideDown()
            // unfortunatly, have to use an .each()
            .each(function(i){
                if ( !((i+1) % 3) ) { // every third from result set.
                    $(this).addClass("last")
                }
            });

        $("#blocks-group").fadeTo(600, 1);

    });

    $("#blocks-group > div.block:nth-child(3n)").addClass( "last" );

});

在此处查看工作示例：http://jsfiddle.net/d7n8F/3/