jQuery .each () index?

102

saya menggunakan

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

untuk mengulang opsi dalam daftar. Saya bertanya-tanya bagaimana saya bisa mendapatkan indeks dari loop saat ini?

karena saya tidak ingin memiliki var i = 0; dan di dalam loop memiliki i ++;

jquery indexing each Hailwood
sumber

181

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

mencatat indeks :)

contoh yang lebih detail ada di bawah.

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Damien-Wright
sumber

1

Dan tidak , misalnya, function( value | element, index | key )seperti metode asli yang setara forEachdan setiap API populer lainnya.

Barney

5

Seringkali lebih baik men-debug dengan console.log daripada alert. Daftar opsi besar akan merusak tumpukan jendela Anda dengan peringatan.

MarkokraM

function(index | key , value | element ) apakah itu valid ..?

Mr world wide

28

jQuery menangani ini untuk Anda. Argumen pertama untuk .each()fungsi callback Anda adalah indeks dari iterasi loop saat ini. Yang kedua adalah elemen DOM yang cocok saat ini Jadi:

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

Alex
sumber

12

Dari dokumentasi jQuery.each () :

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

Jadi, Anda ingin menggunakan:

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

... di mana indeks akan menjadi indeks dan elemen akan menjadi elemen opsi dalam daftar

01001111
sumber

4

terkejut melihat bahwa tidak ada yang memberikan sintaks ini.

.each sintaks dengan data atau koleksi

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

ATAU

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

Saurabh Chandra Patel
sumber

3

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

Ives.me
sumber

jQuery .each () index?

Jawaban: