JQuery Loop over JQueryObjects

Question

Hi,

I have a method, which will accept a parameter of a JQuery Object and will calculate totals for a section. So if you give it a JQuery Object of a div containing the section it will calculate a total for it

so you can do this:

var $totalcompletion = CalculateSectionCompletion(jQuery("#Section1"));

Now I have multiple divs with the class of section container. I want to be able to call the above method on any div with that class.

I'm doing this:

jQuery("div.SectionContainer").each( function(i, valueOfElement){
CalculateSectionCompletion(valueOfElement);
});

The problem is the valueOfElement is actually the DOM object and not the JQuery Object, so I can't pass this in to my method.

Is there anyway I can loop through all JQuery Objects selected by a query, without writing some dirty code to extract the Id from the DOM object, and call JQuery(valueOfElement.id) and pass it in?

Answer 1

You can wrap any DOM element in $(..), as you do with $(document).

So I think you should be able to

jQuery("div.SectionContainer").each( function(i, valueOfElement){
  CalculateSectionCompletion($(valueOfElement));
});

Answer 2

You could also ignore the i and valueOfElement arguments altogether and use this.

jQuery("div.SectionContainer").each(function(){
  CalculateSectionCompletion(jQuery(this));
});

You could even make the CalculateSectionCompletion function wrap it's argument in the jQuery object.

jQuery("div.SectionContainer").each(function(){
  CalculateSectionCompletion(this);
});

function CalculateSectionCopletion(e){
  jQuery(e).dostuff();
}