jQuery .each () index?

102

j'utilise

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

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

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

jquery indexing each

— Hailwood
source

181

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

enregistre l'index :)

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

Afficher l'extrait de code

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>

Développer l'extrait

— Damien-Wright
source

1

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

— Barney

5

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 une alerte.

— MarkokraM

function(index | key , value | element ) est-ce valide ..?

— Mr world wide

28

jQuery s'occupe de cela pour vous. Le premier argument de votre .each()fonction de rappel est l'index de l'itération actuelle de la boucle. Le second étant l'élément DOM correspondant actuel Donc:

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

— Alex
source

12

Depuis la documentation jQuery.each () :

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

Vous voudrez donc utiliser:

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

... où index sera l'index et l'élément sera l'élément option dans la liste

— 01001111
source

4

surprise de voir qu'aucun n'a donné cette syntaxe.

.each syntaxe avec données ou collection

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

OU

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

— Saurabh Chandra Patel
source

3

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

— Ives.me
source