107 votes

jQuery .each() index ?

J'utilise

$('#list option').each(function(){
//do stuff
});

pour boucler sur les options d'une liste. Je me demande comment je pourrais obtenir l'index de la boucle actuelle ?

car je ne veux pas avoir à avoir var i = 0 ; et à l'intérieur de la boucle avoir i++ ;

190voto

Damien-at-SF Points 2794
$('#list option').each(function(index){
  //do stuff
  console.log(index);
});

enregistre l'index :)

un exemple plus détaillé est présenté ci-dessous.

function run_each() {

  var $results = $(".results");

  $results.empty();

  $results.append("==================== START 1st each ====================");
  console.log("==================== START 1st each ====================");

  $('#my_select option').each(function(index, value) {
    $results.append("<br>");
    // log the index
    $results.append("index: " + index);
    $results.append("<br>");
    console.log("index: " + index);
    // logs the element
    // $results.append(value);  this would actually remove the element
    $results.append("<br>");
    console.log(value);
    // logs element property
    $results.append(value.innerHTML);
    $results.append("<br>");
    console.log(value.innerHTML);
    // logs element property
    $results.append(this.text);
    $results.append("<br>");
    console.log(this.text);
    // jquery
    $results.append($(this).text());
    $results.append("<br>");
    console.log($(this).text());

    // BEGIN just to see what would happen if nesting an .each within an .each
    $('p').each(function(index) {
      $results.append("==================== nested each");
      $results.append("<br>");
      $results.append("nested each index: " + index);
      $results.append("<br>");
      console.log(index);
    });
    // END just to see what would happen if nesting an .each within an .each

  });

  $results.append("<br>");
  $results.append("==================== START 2nd each ====================");
  console.log("");
  console.log("==================== START 2nd each ====================");

  $('ul li').each(function(index, value) {
    $results.append("<br>");
    // log the index
    $results.append("index: " + index);
    $results.append("<br>");
    console.log(index);
    // logs the element
    // $results.append(value); this would actually remove the element
    $results.append("<br>");
    console.log(value);
    // logs element property
    $results.append(value.innerHTML);
    $results.append("<br>");
    console.log(value.innerHTML);
    // logs element property
    $results.append(this.innerHTML);
    $results.append("<br>");
    console.log(this.innerHTML);
    // jquery
    $results.append($(this).text());
    $results.append("<br>");
    console.log($(this).text());
  });

}

$(document).on("click", ".clicker", function() {

  run_each();

});

.results {
  background: #000;
  height: 150px;
  overflow: auto;
  color: lime;
  font-family: arial;
  padding: 20px;
}

.container {
  display: flex;
}

.one,
.two,
.three {
  width: 33.3%;
}

.one {
  background: yellow;
  text-align: center;
}

.two {
  background: pink;
}

.three {
  background: darkgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <div class="one">
    <select id="my_select">
      <option>apple</option>
      <option>orange</option>
      <option>pear</option>
    </select>
  </div>

  <div class="two">
    <ul id="my_list">
      <li>canada</li>
      <li>america</li>
      <li>france</li>
    </ul>
  </div>

  <div class="three">
    <p>do</p>
    <p>re</p>
    <p>me</p>
  </div>

</div>

<button class="clicker">run_each()</button>

<div class="results">

</div>

1 votes

Et pas par exemple, function( value | element, index | key ) comme la méthode native équivalente forEach et toutes les autres API populaires.

5 votes

Il est souvent préférable de déboguer avec console.log plutôt qu'avec alert. Une grande liste d'options ruinerait votre pile de fenêtres avec alert.

0 votes

function(index | key , value | element ) Est-ce que c'est valable ?

28voto

Alex Points 21247

JQuery s'en charge pour vous. Le premier argument de votre .each() est l'index de l'itération actuelle de la boucle. Le second étant l'élément DOM correspondant actuel So :

$('#list option').each(function(index, element){
  alert("Iteration: " + index)
});

12voto

01001111 Points 627

De la Documentation de jQuery.each() :

.each( function(index, Element) )
    function(index, Element)A function to execute for each matched element.

Donc vous voudrez utiliser :

$('#list option').each(function(i,e){
    //do stuff
});

...où index sera l'indice et élément sera l'élément optionnel de la liste.

6voto

Surprise de voir que personne n'a donné cette syntaxe.

.each syntaxe des données ou de la collecte

jQuery.each(collection, callback(indexInArray, valueOfElement));

OU

jQuery.each( jQuery('#list option'), function(indexInArray, valueOfElement){
//your code here
});

3voto

Ives.me Points 1399
$('#list option').each(function(intIndex){
//do stuff
});

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X