web-dev-qa-db-fra.com

Jquery each - Arrête la boucle et renvoie l'objet

Quelqu'un peut-il me dire pourquoi la boucle ne s'est pas arrêtée après le 5 entrée?

http://jsbin.com/ucuqot/edit#preview

$(document).ready(function()
{
  someArray = new Array();
  someArray[0] = 't5';
  someArray[1] = 'z12';
  someArray[2] = 'b88';
  someArray[3] = 's55';
  someArray[4] = 'e51';
  someArray[5] = 'o322';
  someArray[6] = 'i22';
  someArray[7] = 'k954';  

  var test =  findXX('o322');   

});

function findXX(Word)
{  
  $.each(someArray, function(i)
  {
    $('body').append('-> '+i+'<br />');
    if(someArray[i] == 'someArray')
    {
      return someArray[i]; //<--- did not stop the loop!
    }   
  });  
}
jqueryloopsreturneach
58
user970727

Parce que lorsque vous utilisez une instruction return dans une boucle each, une valeur "non fausse" agira comme un continue, alors que false agira comme un break. Vous devrez retourner false à partir de la fonction each. Quelque chose comme ça:

function findXX(Word) {
    var toReturn; 
    $.each(someArray, function(i) {
        $('body').append('-> '+i+'<br />');
        if(someArray[i] == Word) {
            toReturn = someArray[i];
            return false;
        }   
    }); 
    return toReturn; 
}

De la docs :

Nous pouvons rompre la boucle $ .each () à une itération particulière en renvoyant la fonction de rappel à false. Renvoyer non-false est identique à une instruction continue dans une boucle for; il passera immédiatement à la prochaine itération.

136
James Allardice

ici :

http://jsbin.com/ucuqot/3/edit

function findXX(Word)
{  
  $.each(someArray, function(i,n)
  {
    $('body').append('-> '+i+'<br />');
    if(n == Word)
    {
      return false;
    }   
  });  
}
2
Royi Namir

modifié $.each une fonction

$.fn.eachReturn = function(arr, callback) {
   var result = null;
   $.each(arr, function(index, value){
       var test = callback(index, value);
       if (test) {
           result = test;
           return false;
       }
   });
   return result ;
}

il cassera la boucle sur un résultat non-faux/non-vide et le renverra, donc dans votre cas, il serait

return $.eachReturn(someArray, function(i){
    ...
1
Peter

Essaye ça ...

  someArray = new Array();
  someArray[0] = 't5';
  someArray[1] = 'z12';
  someArray[2] = 'b88';
  someArray[3] = 's55';
  someArray[4] = 'e51';
  someArray[5] = 'o322';
  someArray[6] = 'i22';
  someArray[7] = 'k954';  

  var test =  findXX('o322'); 
  console.log(test);



function findXX(Word)
{  
  for(var i in someArray){


    if(someArray[i] == Word)
    {
      return someArray[i]; //<---  stop the loop!
    }   
  }
}
0
sangeeth kumar

"Nous pouvons rompre la boucle $ .each () à une itération particulière en renvoyant la fonction de rappel à false. Renvoyer non-false équivaut à une instruction continue dans une boucle for; elle passera immédiatement à la prochaine itération."

de http://api.jquery.com/jquery.each/

Oui, c'est vieux MAIS, juste pour répondre à la question, cela peut être un peu plus simple:

function findXX(Word) {
  $.each(someArray, function(index, value) {
    $('body').append('-> ' + index + ":" + value + '<br />');
    return !(value == Word);
  });
}
$(function() {
  someArray = new Array();
  someArray[0] = 't5';
  someArray[1] = 'z12';
  someArray[2] = 'b88';
  someArray[3] = 's55';
  someArray[4] = 'e51';
  someArray[5] = 'o322';
  someArray[6] = 'i22';
  someArray[7] = 'k954';
  findXX('o322');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Un peu plus avec des commentaires:

function findXX(myA, Word) {
  let br = '<br />';//create once
  let myHolder = $("<div />");//get a holder to not hit DOM a lot
  let found = false;//default return
  $.each(myA, function(index, value) {
    found = (value == Word);
    myHolder.append('-> ' + index + ":" + value + br);
    return !found;
  });
  $('body').append(myHolder.html());// hit DOM once
  return found;
}
$(function() {
  // no horrid global array, easier array setup;
  let someArray = ['t5', 'z12', 'b88', 's55', 'e51', 'o322', 'i22', 'k954'];
  // pass the array and the value we want to find, return back a value
  let test = findXX(someArray, 'o322');
  $('body').append("<div>Found:" + test + "</div>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

NOTE: le tableau .includes() pourrait mieux convenir ici https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

Ou simplement .find() pour obtenir cela https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

0
Mark Schultheiss