Loop through jQuery plugin options

Question

I'm not sure how to do this, i thought i was doing it right, but apparently not. In the 2nd code block you'll see a console.log() call and the way i thought you would loop through all the item s but that isn't working. How would I do this? Also, this is a work in progress hence all the commented code, but this is the main part!

Thanks in advance!

So, i have this for my jQuery plugin call:

$('p').contextMenu({
                item:{
                    name:'Back',
                    action:function(){
                        alert('Back!');
                    },
                    icon:'http://cdn.iconfinder.net/data/icons/crystalproject/16x16/actions/agt_back.png'
                },
                item:{
                    name:'Forward',
                    action:function(){
                        alert('Forward!');
                    },
                    icon:'http://cdn.iconfinder.net/data/icons/crystalproject/16x16/actions/agt_forward.png'
                }
            });

And here is my actual jQuery plugin code:

(function($){
                $.fn.extend({ 
                    //plugin name - animatemenu
                    contextMenu: function(menuitems,options) {
                        if(!options){options == null;}
                        //Settings list and the default values
                        var defaults = {
                        };

                        var options = $.extend(defaults, options);

                        return this.each(function() {
                            var o =options;

                            //Assign current element to variable, in this case is UL element
                            var $obj = $(this);             

                            $obj.mousedown(function(event) {
                                switch (event.which) {
                                    case 1: //Left
                                    //alert('Left mouse button pressed');
                                    break;
                                    case 2: //Middle
                                    //alert('Middle mouse button pressed');
                                    break;
                                    case 3: //Right
                                    //menuitems.item.action();
                                    for(x in menuitems){
                                        console.log(menuitems.item[x])
                                    }
                                    break;
                                    default: //Unknown

                                }
                            });

                        });
                    }
                });
            })(jQuery);

Answer 1

Your menuitems object can only have one item property and it's getting overwritten in your declaration. Make menuitems an array instead:

$('p').contextMenu([
    {
        name:'Back',
        action:function(){
            alert('Back!');
        },
        icon:'http://cdn.iconfinder.net/data/icons/crystalproject/16x16/actions/agt_back.png'
    }, 
    {
        name:'Forward',
        action:function(){
            alert('Forward!');
        },
        icon:'http://cdn.iconfinder.net/data/icons/crystalproject/16x16/actions/agt_forward.png'
    }
]);

If you think it needs to be simplified a bit for the devs you're referring to, perhaps just define the items as a variable first.

var items = [ {name: 'Forward'}, {name: 'Back'} ];
$('p').contextMenu(items);

Then you can access both items the way you originally intended:

var len = menuitems.length;
for (var i = 0; i < len; i++;){
    console.log(menuitems[i]);
}

Just as a side note, I've changed your for in loop to a regular for . The for in loop is really inefficient and should be avoided. (My replacement loop could be written more efficiently as well, but then the syntax starts to look strange and your comment seems to indicate that the devs you work with might get a little confused (no disrespect intended there)).