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

JqueryEach

Jquery Problem Overview


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?

Jquery Solutions


Solution 1 - Jquery

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

1) Using $.each() function
var myArray = [10,20,30];

$.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
2) Using .each() method
$('#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

Resources

Solution 2 - Jquery

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.

Solution 3 - Jquery

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 :)

Solution 4 - Jquery

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/

Solution 5 - Jquery

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.

Solution 6 - Jquery

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.

Solution 7 - Jquery

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()

Solution 8 - Jquery

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmarkyView Question on Stackoverflow
Solution 1 - JqueryPhilView Answer on Stackoverflow
Solution 2 - JquerytigView Answer on Stackoverflow
Solution 3 - JqueryMichael WrightView Answer on Stackoverflow
Solution 4 - JqueryStuperUserView Answer on Stackoverflow
Solution 5 - JqueryjAndyView Answer on Stackoverflow
Solution 6 - JqueryOdnxeView Answer on Stackoverflow
Solution 7 - JqueryJamie DixonView Answer on Stackoverflow
Solution 8 - JquerySethView Answer on Stackoverflow