jQuery randomly add class to list items with limit

Question

I have a bit fo code which is working fine, it either doesn't add a class or ads a classe of wide to items within a list.

I am trying to find a solution to limit how many of the list items can have the class of wide.

I am using this more a masonry wall and would like to limit the number of wide items within the wall.

My current code is below, is there a way to limit this?

// Random masonry item class on homepage
jQuery(document).ready(function(){
    var classes = [" ", "wide"];

    jQuery(".mix-target").each(function(){
        jQuery(this).addClass(classes[~~(Math.random()*classes.length)]);
    });
});

Use `var wideCount = jQuery(".mix-target.wide").length;` to determine the number of your current `.wide` items. — haim770, Apr 29 '15 at 10:50
@JoshStevenson http://stackoverflow.com/questions/5971645/what-is-the-double-tilde-operator-in-javascript — Rory McCrossan, Apr 29 '15 at 11:00

score 0 · Accepted Answer · answered Apr 29 '15 at 15:09

Something like this?

jQuery(document).ready(function(){
    var classes = [" ", "wide"];

    var limit = 3;
    jQuery(".mix-target").each(function(){
        if (limit == 0)
            return false;

        var index = ~~(Math.random()*classes.length);
        if (index == 1)
             limit--;

        jQuery(this).addClass(classes[index]);
    });
});

jQuery randomly add class to list items with limit

1 Answers1