第一次迭代后，用于循环的JQuery Javascript停止

Question

I have two <ul> lists, and I want to move a selected element from one to another after checking if it already exists in the destination list, so I had to create a function that compares the text of the the selected <li> with the <li> elements n the destination <ul> :

$(document).ready(function () {
    $('html').on('click', 'li', function() {
        $(this).toggleClass('selected');
    });

//Déplacer vers la gauche
$('#btnLeft').click(function() {    

    var elementExiste = function(liste,selectionne){
        var exists=false;
        for(var x=0; x<liste.length; x++){
            if(liste.children().eq(x).text()===selectionne){ 
                exists=true;
                break;
            }
        }
        return exists;
    }

    var bool = true;
    for(var i=0; i< $('.selected').length; i++){        
        if(elementExiste($('.list1'),$('.selected').eq(i).text())){
            alert('Cet élément existe déjà');
            bool = bool && false;
        }
        else {
            bool = bool && true
        }
    }

    if(bool)
            $('.list1').append($('.list2 .selected').removeClass('selected'));
    });
}

The for loop works fine for the first iteration, but it just breaks after this

Answer 1

You pass ul to the function so liste.length = 1 You could pass all li elements:

elementExiste($('.list1 li'),$('.selected').eq(i).text()))

or pick li elements inside:

liste.children().length

so it could iterate through all of them.