Question

I’m trying to learn to structure my code better, and have started using the pattern below after following a few tutorials.

I’ve had a fair amount of success building a number of common UI widgets this way, though I’ve hit my first wall, the .each() loops below do not seem to actually be looping through each item but are applying the desired action as if it was acting on all of the items in one iteration.

I read something about $.each and objects, though I’m not sure about $.each, or even whether it is teh direction I should be going.

jQuery(document).ready(function($) {

var tabs = {

    trig : $('nav.tab-triggers'),
    content : $('section.tabs-content'),

    init : function() {
        tabs.address([tabs.trig]);
        tabs.address([tabs.content]);
    },

    address : function(item) {
        //for every instance of the item

        $(item).each(function() {
            var i = 1;
            $(this).addClass('tabs-' + i);

            // for ever child element in this instance of the item
            $(this).children().each(function() {
                var count = 1;
                if ( $(this).parent().is('nav') ) {
                    $(this).attr('href', '#tab-' + count);
               } else {
                    $(this).attr('id', 'tab-' + count);
               }

                count++;

            });

            i++;
        });
    },

    display : function () {
        //show hide stuff here.
    }


}

tabs.init();

});

Answer 1

So after much trial and error I’ve finally got it working.

basically, as I understand it, I’m trying to iterate over a nested objet and so the .each needs to be replaced with $.each method which works slightly differently.

    address : function(obj) {
        // for each obj
        $.each(obj, function(index,value) {
            //for each instance of the trigger / content item in the obj
             $.each(obj[index], function(index2,value2) {
                //add an incrementing class for each matched element
                $(value2).addClass('tabs-' + index2);
                // get the children of each matched element
                var kids = $(value2).children();
                // loop through each of the children
                $.each(kids, function(index3, value3) {
                    // if its parent is a nav element
                    if ( $(value3).parent().is('nav') ) {
                        // add href
                        $(value3).attr('href', '#tab-' + index3);
                    } else {
                        // add matching ids
                        $(value3).attr('id', 'tab-' + index3);
                    }


                });  // end loop through children elements
             }); // end loop through parent elements
        }); // iteration of passed obj
    }, // end address method

Thats the new method – that works. Is there a better way to do this ?