jQuery .each () Index?

102

ich benutze

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

um die Optionen in einer Liste zu durchlaufen. Ich frage mich, wie ich den Index der aktuellen Schleife erhalten könnte.

da ich nicht var i = 0 haben möchte; und innerhalb der Schleife haben i ++;

jquery indexing each Hagelholz
quelle

181

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

protokolliert den Index :)

Ein detaillierteres Beispiel finden Sie unten.

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Damien-Wright
quelle

1

Und nicht zum Beispiel function( value | element, index | key )wie die entsprechende native Methode forEachund jede andere beliebte API.

Barney

5

Oft ist es besser, mit console.log zu debuggen als mit alert. Eine große Optionsliste würde Ihren Fensterstapel mit Alarm ruinieren.

MarkokraM

function(index | key , value | element ) ist es gültig ..?

Herr weltweit

28

jQuery kümmert sich für Sie darum. Das erste Argument für Ihre .each()Rückruffunktion ist der Index der aktuellen Iteration der Schleife. Das zweite ist das aktuell übereinstimmende DOM-Element. Also:

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

Alex
quelle

12

Aus der Dokumentation zu jQuery.each () :

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

Sie möchten also Folgendes verwenden:

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

... wobei index der Index ist und element das Optionselement in der Liste ist

01001111
quelle

4

Überraschung zu sehen, dass niemand diese Syntax gegeben hat.

.each Syntax mit Daten oder Sammlung

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

ODER

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

Saurabh Chandra Patel
quelle

3

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

Ives.me
quelle

jQuery .each () Index?

Antworten: