Pushing object parameters through jQuery .each()

Question

Anyone has experience with niceScroll... I'm trying to optimize the code that assigns scrollers to their respective elements and attaches their properties. This works only on the first object present in the array ($ele1):

var obj = {
  cursorwidth: 6,
  railoffset: {top:0,left:20}
};

var eleArray = [$ele1, $ele2];

$(eleArray).each(function() {

   $(this).niceScroll( obj );

});

but this is ok for all objects in array:

var eleArray = [$ele1, $ele2];

$(eleArray).each(function() {

  $(this).niceScroll( {
     cursorwidth: 6,
     railoffset: {top:0,left:20}
  } );

});

Any way to have those properties streamlined from an external var where all objects from the array would be processed?

Answer 1

The reason why you can reuse the same input obj for the iteration is because, internally, the plugin is adding various informations related to the single instance. Take a look to this example:

http://jsfiddle.net/46TLb/

Check to the console. You are passing this:

{"cursorwidth":6,"railoffset":{"top":0,"left":20}}

And it adds and transforms it in something like that:

{"cursorwidth":6,"railoffset":{"top":0,"left":20},"doc":{"0":{"jQuery110107344591654536623":7},"context":{"jQuery110107344591654536623":7},"length":1}}

So the answer is: you can't reuse the same instance of the passing parameters to the niceScroll function, because it's changing it for its own convenience. And, really, that wasn't a great optimization. If you need to optimize, you can try to replace jquery each functions with built-in javascript for loops:

var eleArray = [$ele1, $ele2];

for (var i = 0; i < eleArray.length; ++i) {

  eleArray[i].niceScroll( {
     cursorwidth: 6,
     railoffset: {top:0,left:20}
  } );

}

Read this for more informations about optimization with jquery: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/