web-dev-qa-db-fra.com

jQuery .each () index?

J'utilise

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

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

comme je ne veux pas avoir var i = 0; et dans la boucle ont i ++;

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

enregistre l'index :)

un exemple plus détaillé est 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>
166
Damien-Wright

jQuery s'en occupe pour vous. Le premier argument de votre fonction de rappel .each() 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)
});
26
Alex

De la documentation 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'index et l'élément sera l'élément option dans la liste

11
01001111
$('#list option').each(function(intIndex){
//do stuff
});
3
Ives.me

surprise de voir que personne n’a donné cette syntaxe.

.each syntaxe avec données ou collection

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

OR

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