How to make variable accessible within jQuery .each() function?

Question

This is and example of a frequent dilemma: how to make markup accessible inide this .each()?

I'm more interested in learning how to access outer variables from within a closure than I am in this specific issue. I could fix this problem by assigning markup from inside the each function, but I'd rather learn a more elegant way to handle this kind of problem.

// hide form & display markup
function assessmentResults(){

  // get assessment responses
  var markup = parseForm();

  // show assessment results to user
  $('#cps-assess-form fieldset').each( function() {
    var q = $(this).find('.fieldset-wrapper');
    var i = 0;

    // hide form questions
    q.slideUp();

    // insert markup
    $('<div>'+markup[i]+'</div>').insertAfter(q);
    i++;
  });

}

markup is already accessible inside your anonymous function assigned in the .each, this is exactly what closures are. — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Mar 7, 2013 at 22:00
At the start of each iteration of .each() you are resetting the variable i to 0. — Terry
– Terry, Commented Mar 7, 2013 at 22:01
I think the .each() is overused, its also quite slow compared to traditional iterators. Why are people so scared to use the good old for loop? — Amy
– Amy, Commented Mar 7, 2013 at 22:03
@sweetamylase The nice thing about it is this is what you are after. — epascarello
– epascarello, Commented Mar 7, 2013 at 22:06
@epascarello The this just referring to one of the elements in the collection, which could easily be var this = elements[i]. By wrapping the jQuery object around this $(this), this step alone takes a bigger performance hit than this = elements[i] — Amy
– Amy, Commented Mar 7, 2013 at 22:09

epascarello · Accepted Answer · 2013-03-07 22:01:31Z

5

Read the docs, it already has an index!

.each( function(index, Element) )

No need for i

$('#cps-assess-form fieldset').each( function(index) {
    var q = $(this).find('.fieldset-wrapper').slideUp();
    $('<div/>').html(markup[index]).insertAfter(q);
});

The reason why yours is failing is the i is inside of the function so it is reset every iteration. You would need to move it outside of the function for it to work.

answered Mar 7, 2013 at 22:01

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make variable accessible within jQuery .each() function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related