ブロックのフィルタリング+すべての3番目の要素にクラスを追加する

Question

Chris Coyierが書いたFiltering Blocksコードを使用していますが、3番目の 'block'要素に 'last'クラスを追加したいとします。

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にクラス "最後" を追加し、ブロックをフィルタリングした後、クラスは同じdivで残りますが、3番目の位置では必要ありません。 私の質問は - これらの2つの関数をどのようにマージすることができるので、クラスはページロード時に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/