JQuery loop without each and callback function

Question

I want to assemble jQuery in a loop without each and callback.

I have the following code

 var found1 = false; $('#Root div.ListItem').each(function( index, d1 ) { if (group == d1.text()){ found1 = true; } } ); if(found1){ return; } 

As soon as found1 set true Next time it is always true. I would like to know how to execute a loop without each and callback like

 for(var id in $('#Root div.ListItem')) { ... } 

UPDATE

I am not interested in how to break the loop. I don't want to pass a callback to each

If I pass the jQuery object in a loop, I get a lot of keys.

http://jsfiddle.net/LwTGU/

In this example, there can be 1 key for one child.

Answer 1

Your attempt to use the for-in statement in your script actually iterates over all the properties of the jQuery array object:

 for (var id in $('#Root div.ListItem')) { // id is the name of the property } 

You do not want this; you need to iterate over the elements in an array-like object:

 for (var id in $('#root span').toArray()) { // convert to native array // id is now an element found by the selector $('<div />', {text: $(id).text()}).appendTo($('#out')); } 

You will see above that the conclusion is what you expected.

So, back to your original question. It sounds like you just need to break out of the loop as soon as you find a match. If you are wondering how to exit the jQuery each loop, just return false; after setting found1 = true; . You should not be afraid to get a callback; this callback is only performed for each element of your selector in the usual old for-loop "under the hood".

If you really want to write a for-each structure yourself, then this will be enough:

 var found1 = false; var items = $('#Root div.ListItem').toArray(); // an array of DOM elements for (var i = 0, j = items.length; i < j; i++) { // You can access the DOM elements in the array by index, but you'll // have to rewrap them in a jQuery object to be able to call .text() if (group == $(items[i]).text()) { found1 = true; break; // no need to keep iterating once a match is found } } 

A shorter, but slower way to do this could be to use $.grep and check to see if something was found:

 var found1 = $.grep($('#Root div.ListItem'), function() { return group == $(this).text(); }).length > 0; 

I would not recommend the latter unless the selector returns only a few elements (e.g. <50).

Answer 2

It looks like you want to stop processing when you meet some condition. You can do this with each , returning false when the condition is met:

 var found1 = false; $('#Root div.ListItem').each(function(index, d1) { if (group == d1.text()) { found1 = true; return false; } }); 

You can also $('#Root div.ListItem') over the return value of $('#Root div.ListItem') , like any other array (if you insist on not using each ).

Answer 3

Since I do not have the necessary reputation (50), I could not comment on the accepted answer. However, I do not believe that the following code will work as expected:

 for (var id in $('#root span').toArray()) { // convert to native array // id is now an element found by the selector $('<div />', {text: $(id).text()}).appendTo($('#out')); } 

If I am missing something, "id" will be an integer representing the index of the iterated array, not the actual element of the array. If so, $ (id) will not point to a valid jquery object. Instead, is it not necessary to be something like this?

 for (var id in $('#root span').toArray()) { // convert to native array // id is now an element found by the selector $('<div />', {text: $($('#root span')[id]).text()}).appendTo($('#out')); }