Home › Forums › JavaScript › Filtering blocks + adding a class to every 3rd element – help needed
- This topic is empty.
-
AuthorPosts
-
February 6, 2011 at 7:38 am #31518dronkaMember
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!
February 6, 2011 at 8:55 am #62707Chris CoyierKeymaster$("."+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.
February 6, 2011 at 9:18 am #62709dronkaMemberHi 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?
February 6, 2011 at 10:04 am #62652SirlonMemberIt 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');
February 6, 2011 at 10:29 am #62635dronkaMemberSirlon, 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?
February 6, 2011 at 11:20 am #62636SirlonMemberYep, 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');
February 6, 2011 at 3:10 pm #62631dronkaMemberSirlon – 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.
February 8, 2011 at 4:37 am #62348dronkaMemberI’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" );
}); -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.