Question

我正在使用Chris Coyier编写的Filtering Blocks代码，但我想在每隔三个'block'元素中添加一个“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');

这最后一行实际上有效，并且为每个第3个div添加了一个“last”类，但是在过滤块之后，该类保持相同的div，这在第3个位置是不必要的。所以，我的问题是 - 如何合并这两个函数，因此该类将在页面加载时添加到每第三个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/

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

1 个答案: