What is the difference between $.each(selector) and $(selector).each()

Question

What is the difference between this:

$.each($('#myTable input[name="deleteItem[]"]:checked').do_something());

and this:

$('#myTable input[name="deleteItem[]"]:checked').each(function() { do_something });

The html for the table cell that is being selected and acted upon looks like this:

<td width="20px"><input type="checkbox" class="chkDeleteItem" name="deleteItem[]" value="' . $rowItem['itemID'] . '" /></td>

I've gone over the jQuery documentation, but I still don't understand the difference. (Is it me or is that documentation sometimes slightly "nebulous" in clarity of content?)

Added Info:

Apparently my attempt a generic examples is confusing people! Along with the (previously) missing parenthesis in the first example. :(

The first example comes from a line in my code that removes the <tbody> for any rows with a checkbox that is checked:

$.each($('#classesTable input[name="deleteClasses[]"]:checked').parent().parent().parent().remove());

The second example comes from a situation where I look through the #classesTable for any checked checkboxes and remove its matching item in a dropdown.

$('#classesTable input[name="deleteClasses[]"]:checked').each(function(){
    $('#classesList option[value="' + $(this).attr('value') + '"]').remove();
});

I understand that they do two different things, but not to the point that I'd be able to say "I need to use $.each() in this case and .each(function() {}) in another case.

Are they interchangeable at all? Only in some cases? Never?

Answer 1

Description:

.each is an iterator that is used to iterate over only jQuery objects collection while jQuery.each ($.each) is a general function for iterating over javascript objects and arrays.

Examples:

Javascript Array ( or js object ) using $.each():

var myArray = [10,20,30];

jQuery.each( myArray, function(index, value) {
   console.log('element at index ' + index + ' is ' + value);
});

//Output
element at index 0 is 10
element at index 1 is 20
element at index 2 is 30

jQuery objects using .each()

$('#dv').children().each(function(index, element) {
    console.log('element at index ' + index + 'is ' + (this.tagName));
    console.log('current element as dom object:' + element);
    console.log('current element as jQuery object:' + $(this));
});

//Output
element at index 0 is input
element at index 1 is p
element at index 2 is span

If you are seeking further examples+details, $.each vs .each()

Resources

• jQuery.each ($.each) doc: https://api.jquery.com/jquery.each/
• .each doc: http://api.jquery.com/each/
• jQuery to loop through elements with the same class

Answer 2

from http://api.jquery.com/jQuery.each:

The $.each() function is not the same as .each(), which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is a map (JavaScript object) or an array.

Answer 3

You want to really use $.each with an array that isn't elements or something. ie:

var x = ["test", "test2"];

You'd use $.each(x... to traverse that instead of x.each :)

.each is for elements only :)

Answer 4

There is no functional difference. Every jQuery object owns a .each() method inherited from jQuery.fn. By calling this object method, jQuery already knows which Array (-like object) to iterate over. In other words, it loops over the indexed propertys from the current jQuery object.

$.each() on the other hand is just a "helper tool" which loops over any kind of Array or Object, but of course you have to tell that method which target you want to iterate.
It'll also take care of you whether you pass in an Array or object, it does the right thing using a for-in or for loop under the hood.

Answer 5

The first will run the callback function to the elements in the collection you've passed in, but your code is not syntactically correct at the moment for it.

It should be:

$.each($('#myTable input[name="deleteItem[]"]:checked'), do_something);

See: http://api.jquery.com/jQuery.each/

The second will run the function on each element of the collection you are running it on.

See: http://api.jquery.com/each/

Answer 6

In the first case you can iterate over jQuery objects and also other array items as indicated here:

jQuery.each()

In the second case you can only itterate over jQuery objects as indicated here:

.each()

Answer 7

From what I understand $.each(); loops through an object or array and gives you the iterator and value of each item.

$().each(); loops through a list of jQuery objects and gives you the iterator and the jQuery object.

Answer 8

Taken from http://api.jquery.com/jQuery.each/

The $.each() function is not the same as .each(), which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is a map (JavaScript object) or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time. (The value can also be accessed through the this keyword, but Javascript will always wrap the this value as an Object even if it is a simple string or number value.) The method returns its first argument, the object that was iterated.