create function for multiple addClass for use with enquire.js

Question

I'm using enquire.js in my current project. I'm using it to add css classes to several elements for large screens and remove those classes on smaller screens:

enquire.register("screen and (min-width: 48.0625em)", {
    match : function() {
        // absolute position for "bubble" lists
        $('.bubbles').addClass('structure');
        $('.structure li:nth-child(1)').addClass('s1');
        $('.structure li:nth-child(2)').addClass('s2');
        $('.structure li:nth-child(3)').addClass('s3');
        $('.structure li:nth-child(4)').addClass('s4');
        $('.structure li:nth-child(5)').addClass('s5');
        $('.structure li:nth-child(6)').addClass('s6');
        $('.structure li:nth-child(7)').addClass('s7');
        $('.structure li:nth-child(8)').addClass('s8');
        $('.structure li:nth-child(9)').addClass('s9');
    },

     unmatch : function () {
        $('.bubbles').removeClass('structure');
        $('.structure li:nth-child(1)').removeClass('s1');
        $('.structure li:nth-child(2)').removeClass('s2');
        $('.structure li:nth-child(3)').removeClass('s3');
        $('.structure li:nth-child(4)').removeClass('s4');
        $('.structure li:nth-child(5)').removeClass('s5');
        $('.structure li:nth-child(6)').removeClass('s6');
        $('.structure li:nth-child(7)').removeClass('s7');
        $('.structure li:nth-child(8)').removeClass('s8');
        $('.structure li:nth-child(9)').removeClass('s9');
    }
});

There's got to be a shorthand to this. I would have thought I could create a function something like:

$(.'bubbles').each(function() {
   // add all the classes here
}

Which would then be reversable in the unmatch function of enquire. Is this possible...?

Answer 1

You can use the index property of the each callback to toggle your classes:

enquire.register("screen and (min-width: 48.0625em)", {
    match: function () {
        // absolute position for "bubble" lists
        $('.bubbles').addClass('structure');
        $('.structure li').each(function (index) {
            $(this).toggleClass('s' + (index + 1));
        });
    },

    unmatch: function () {
        $('.structure li').each(function (index) {
            $(this).toggleClass('s' + (index + 1));
        });
        $('.bubbles').removeClass('structure');
    }
});