unable to break out of jquery each loop

Question

I have a nested loop written in jquery and return false inside my child loop keeps appending the same text to the parent row. My code,

$('#listingProducts ul.msRows li.msFullfillment').each(function(index) {                    
    if(typeof $('#hfOrd'+index).val() != 'undefined'){
        var $this = $(this);
        var orderId = $('#hfOrd'+index).val();                      
        // repainting logic
        $('body').append(data);
        $('#ajaxProducts ul.displayPoints li').each(function(index){
            var $child = $(this);
            if(typeof $('#hfAjaxOrderId'+index).val() != 'undefined'){
                var ajaxOrderId = $('#hfAjaxOrderId'+index).val();
                //alert(orderId+' '+ ' '+ajaxOrderId);
                if(ajaxOrderId === orderId){
                    // replace the div here..
                    var anchorText = $child.find("#pointsLineAjax .redeem").text();     
                    $this.find("#pointsLine .redeem").text(anchorText);
                    return false;
                }
            }
        });

    }
});

Return false inside child loop doesnt go back to the parent. That doesnt seem to write it to the corresponding row. What am i missing here..

@ling.s its the orderid in the existing row and i am comparing with the row returned from ajax which has orderid if both are same i am replacing the text. — coderman, Jan 17 '14 at 06:11
Check `alert($('#hfOrd'+index).val());` and see what it shows. can you post it in http://jsfiddle.net/ — Linga, Jan 17 '14 at 06:16
See this answer: http://stackoverflow.com/a/3267627/661447 You don't need `if(typeof $('#hfOrd'+index).val() != 'undefined')`, just do `if($('#hfOrd'+index).length)` — jammykam, Jan 17 '14 at 06:19
@ling.s That is correct syntax, you would essentially get `$('#hfOrd1').val()`, `$('#hfOrd2').val()` etc — jammykam, Jan 17 '14 at 06:20
@ling.s That is what it what it would equate to, it is just appending text to text to generate a selector: http://jsfiddle.net/jammykam/MBLrM/ — jammykam, Jan 17 '14 at 06:26
@coderman I think `if(ajaxOrderId === orderId)` is always false because they are pointing different objects. try `==` — Linga, Jan 17 '14 at 06:29

score 2 · Answer 1 · edited May 23 '17 at 12:11

Returning false only breaks out of the inner loop in a jQuery loop, there is a good explanation for the reason in this answer.

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.

Try the following:

$('#listingProducts ul.msRows li.msFullfillment').each(function(index) {                    
    var continueLoop = true;
    if($('#hfOrd'+index).length){
        var $this = $(this);
        var orderId = $('#hfOrd'+index).val();                      
        // repainting logic
        $('body').append(data);
        $('#ajaxProducts ul.displayPoints li').each(function(index){
            var $child = $(this);
            if($('#hfAjaxOrderId'+index).length){
                var ajaxOrderId = $('#hfAjaxOrderId'+index).val();
                //alert(orderId+' '+ ' '+ajaxOrderId);
                if(ajaxOrderId === orderId){
                    // replace the div here..
                    var anchorText = $child.find("#pointsLineAjax .redeem").text();     
                    $this.find("#pointsLine .redeem").text(anchorText);
                    continueLoop = false;
                    return false;
                }
            }
        });
    };
    return continueLoop;
});

unable to break out of jquery each loop

1 Answers1