Nested jQuery.each() - continue/break
Consider the following code:
var sentences = [
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
'Vivamus aliquet nisl quis velit ornare tempor.',
'Cras s开发者_如何学Pythonit amet neque ante, eu ultrices est.',
'Integer id lectus id nunc venenatis gravida nec eget dolor.',
'Suspendisse imperdiet turpis ut justo ultricies a aliquet tortor ultrices.'
];
var words = ['ipsum', 'amet', 'elit'];
$(sentences).each(function() {
var s = this;
alert(s);
$(words).each(function(i) {
if (s.indexOf(this) > -1)
{
alert('found ' + this);
return false;
}
});
});
The interesting part is the nested jQuery.each() loops. As per the documentation, returning false will break out of the loop (discontinuing execution of the loop - similar to a normal JavaScript break statement), and returning non-false will stop the current iteration and continue with the next iteration (similar to a normal JavaScript continue statement).
I can break or continue a jQuery.each() on its own, but with nested jQuery.each, I've found it difficult to break out of the parent loop from within the child loop. I could use a boolean value, and update it on every child iteration, but I was wondering if there was an easier way.
I've set up an example at jsFiddle if you'd like to mess around with it. Simply click the "Test" button to run the example shown above.
TLDR: Is there anything resembling a labeled continue or break within the context of jQuery?
There are a lot of answers here. And it's old, but this is for anyone coming here via google. In jQuery each function
return false;
is like break
.
just
return;
is like continue
These will emulate the behavior of break and continue.
You should do this without jQuery, it may not be as "pretty" but there's less going on and it's easier to do exactly what you want, like this:
var sentences = [
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
'Vivamus aliquet nisl quis velit ornare tempor.',
'Cras sit amet neque ante, eu ultrices est.',
'Integer id lectus id nunc venenatis gravida nec eget dolor.',
'Suspendisse imperdiet turpis ut justo ultricies a aliquet tortor ultrices.'
];
var words = ['ipsum', 'amet', 'elit'];
for(var s=0; s<sentences.length; s++) {
alert(sentences[s]);
for(var w=0; w<words.length; w++) {
if(sentences[s].indexOf(words[w]) > -1) {
alert('found ' + words[w]);
return;
}
}
}
You can try it out here. I'm not sure if this is the exact behavior you're after, but now you're not in a closure inside a closure created by the double .each()
and you can return
or break
whenever you want in this case.
As is stated in the jQuery documentation http://api.jquery.com/jQuery.each/
return true
in jQuery.each
is the same as a continue
return false
is the same as a break
There is no clean way to do this and like @Nick mentioned above it might just be easier to use the old school way of loops as then you can control this. But if you want to stick with what you got there is one way you could handle this. I'm sure I will get some heat for this one. But...
One way you could do what you want without an if statement is to raise an error and wrap your loop with a try/catch block:
try{
$(sentences).each(function() {
var s = this;
alert(s);
$(words).each(function(i) {
if (s.indexOf(this) > -1)
{
alert('found ' + this);
throw "Exit Error";
}
});
});
}
catch (e)
{
alert(e)
}
Ok, let the thrashing begin.
The problem here is that while you can return false from within the .each
callback, the .each
function itself returns the jQuery object. So you have to return a false at both levels to stop the iteration of the loop. Also since there is not way to know if the inner .each
found a match or not, we will have to use a shared variable using a closure that gets updated.
Each inner iteration of words
refers to the same notFound
variable, so we just need to update it when a match is found, and then return it. The outer closure already has a reference to it, so it can break
out when needed.
$(sentences).each(function() {
var s = this;
var notFound = true;
$(words).each(function() {
return (notFound = (s.indexOf(this) == -1));
});
return notFound;
});
You can try your example here.
I've used a "breakout" pattern for this:
$(sentences).each(function() {
var breakout;
var s = this;
alert(s);
$(words).each(function(i) {
if (s.indexOf(this) > -1)
{
alert('found ' + this);
return breakout = false;
}
});
return breakout;
});
This works nicely to any nesting depth. breakout
is a simple flag. It will stay undefined
unless and until you set it to false
(as I do in my return statement as illustrated above). All you have to do is:
- declare it in your outermost closure:
var breakout;
- add it to your
return false
statement(s):return breakout = false
- return breakout in your outer closure(s).
Not too inelegant, right? ...works for me anyway.
Unfortunately no. The problem here is that the iteration happens inside functions, so they aren't like normal loops. The only way you can "break" out of a function is by returning or by throwing an exception. So yes, using a boolean flag seems to be the only reasonable way to "break" out of the outer "loop".
return true not work
return false working
found = false;
query = "foo";
$('.items').each(function()
{
if($(this).text() == query)
{
found = true;
return false;
}
});
Labeled Break
outerloop:
$(sentences).each(function()
{
$(words).each(function(i)
{
break; /* breaks inner loop */
}
$(words).each(function(i)
{
break outerloop; /* breaks outer loop */
}
}
Confirm in API documentation http://api.jquery.com/jQuery.each/ say:
We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.
and this is my example http://jsfiddle.net/r6jqP/
(function($){
$('#go').on('click',function(){
var i=0,
all=0;
$('li').each(function(){
all++;
if($('#mytext').val()=='continue')return true;
i++;
if($('#mytext').val()==$(this).html()){
return false;
}
});
alert('Iterazione : '+i+' to '+all);
});
}(jQuery));
You can break the $.each()
loop at a particular iteration by making the callback function return false.
Returning non-false is the same as a continue
statement in a for loop; it will skip immediately to the next iteration.
精彩评论