Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts

    Question apply classes to remainder of a collection (modulo operation)

    OK, let’s say I have an unordered list with 32 list items (amount can vary) that are floated to the left to have them next to each other. The content is wide enough to fit five list items side by side. I need to give the items that go in the last row some special treatment and want to apply a class to those. How would I go about that as the amount of list items can vary?

    With 32 items I have six rows with five items, with a remainder of two items. How do I retreive these last items? Is there a way to start an each() iteration at a specific index? Couldn’t find anything about that.

    Hmm, now that I think about it – if there is an amount of items that’s exactly dividable by five there a modulo operaion wouldn’t result in a remainder so a last row that’s completely filled with five items won’t be considered, would it? Dammit, I’m confused and appreciate any help.

  • #2
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    are you able to give that last LI a class or id?

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Yes, definitely. I can access the last item with jQuery easily. Just need to find the last one to five items, depending on the amount of items in the collection.

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Code:
    $(function(){
    	$('#mylist li').eq(-6).addClass('list_cutoff');
    	$('#mylist .li:last').addClass('myclass').prevUntil('.list_cutoff').addClass('myclass');
    });
    There's probably a more efficient way than that but it seems to work against my rough tests...

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    I haven’t tested this yet but it looks like it always applies the class to the last five items. However, the amount of items can vary so there might be only three or four items in the last row and in that case I only want to apply the special treatment to the last three or four items.

    For example, if I have 30 list items I get six rows with five items each. In this case the last five items need a class. If I have 32 items I have seven rows where the last row has two items, and in this case only the last two items need a class, etc. So basically, if modulo zero, apply class to the last five items, if modulo one apply class to last item only, if modulo two, apply class to last two items, etc.

    Hm, hang on… I think I’m getting somwhere with this thought…

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    How about populating the list items using some serverside code?
    (PS: I'm still struggling to get grip on these js frameworks )
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Ah. Yeah, sorry misread your initial post.

    This seems to do it though - again, not the tidiest of code but it'll highlight the last row regardless of how many items are on it.

    Code:
    $(function(){
    	var items_per_row		= 5;
    	var li_count			= $('#mylist li').length;
    	var final_row_count		= li_count % items_per_row;
    	final_row_count = (final_row_count == 0) ? items_per_row : final_row_count;
    	$('#mylist li').eq(-final_row_count).addClass('list_cutoff highlightclass');
    	if (final_row_count > 1){
    		$('#mylist li:last').addClass('myclass').prevUntil('.list_cutoff').addClass('highlightclass');
    	}
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •