jQuery .each () index?

102

estoy usando

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

para recorrer las opciones en una lista. Me pregunto cómo podría obtener el índice del bucle actual.

como no quiero tener var i = 0; y dentro del bucle tienen i ++;

jquery indexing each Granizo
fuente

181

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

registra el índice :)

un ejemplo más detallado se muestra a continuación.

Mostrar fragmento de código

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>

Expandir fragmento

Damien-Wright
fuente

1

Y no , por ejemplo, function( value | element, index | key )como el método nativo equivalente forEachy cualquier otra API popular.

Barney

5

A menudo, es mejor depurar con console.log que alert. La lista de opciones grande arruinaría su pila de ventanas con alerta.

MarkokraM

function(index | key , value | element ) es valido ..?

Mr world wide

28

jQuery se encarga de esto por usted. El primer argumento de su .each()función de devolución de llamada es el índice de la iteración actual del bucle. El segundo es el elemento DOM coincidente actual Entonces:

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

Alex
fuente

12

De la documentación de jQuery.each () :

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

Entonces querrás usar:

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

... donde index será el índice y el elemento será el elemento de opción en la lista

01001111
fuente

4

Sorprende ver que no han dado esta sintaxis.

.each sintaxis con datos o colección

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

O

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

Saurabh Chandra Patel
fuente

3

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

Ives.me
fuente

jQuery .each () index?

Respuestas: