Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Filtering blocks + adding a class to every 3rd element – help needed

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #31518
    dronka
    Member

    I’m using Filtering Blocks code written by Chris, but I want to add a class ‘last’ to every third ‘block’ element (to remove margin-right).
    So far I have this:
    HTML:













    //I want this to get 'last' class











    //I want this to get 'last' class




    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');

    This last line actually works, and adds a class “last” to every 3rd div, but after filtering blocks, the class stays with the same div, which isn’t necessary at 3rd position.
    So, my question is – how can I merge those two functions, so the class would be added on page load to every third div, then removed and added again after filtering blocks.

    Any help or assistance would be greatly appreciated!

    #62707
    Chris Coyier
    Keymaster
    $("."+newSelection).slideDown(400, function() {

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

    });

    Replace the line with that slide down with this.

    #62709
    dronka
    Member

    Hi Chris, thank you so much for your answer! I’ve replaced the line, but I’m afraid it still doesn’t work :/
    This is my code:

    $(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").not("."+newSelection).slideUp();
    $("."+newSelection).slideDown(400, function() {

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

    });;

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

    });

    });

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

    Live example on my test page.

    Any idea why it doesn’t work? What am i missing here?

    #62652
    Sirlon
    Member

    It is working but you should only add the class to ones are not hidden.

    Try

    $("div#blocks-group > div:nth-child(3n)").not(':hidden').addClass('last');
    #62635
    dronka
    Member

    Sirlon, you’re right – it wasn’t working, because it was affecting all elements (hidden ones too). Unfortunately the part “not(‘:hidden’)” doesn’t seem to solve the problem..

    Any other ideas?

    #62636
    Sirlon
    Member

    Yep, little logical fail of myself.

    So this should do it:

    $("div#blocks-group > div:visible").map(function(i, e){ if(((i+1) % 3) == 0)return e;}).addClass('last');
    #62631
    dronka
    Member

    Sirlon – thank you so much! It works great.

    But there is still one more problem – it adds the class ‘last’ as it should, but not on the first click, after second click is ok, but after I refresh page – I have to click twice to get it.

    test page

    #62348
    dronka
    Member

    I’ve got another answer on stackoverflow, so I’m putting working code here in case someone would have same problem in the future. It works as good as Sirlon’s but doesn’t require second click:


    $(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" );

    });
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.