jQuery .each() 索引？

jQuery .each() index?

提问by Hailwood

I am using

我在用

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

to loop over the options in a list. I am wondering how I could get the index of the current loop?

循环遍历列表中的选项。我想知道如何获得当前循环的索引？

as I dont want to have to have var i = 0; and inside the loop have i++;

因为我不想让 var i = 0; 并且在循环内部有 i++；

回答by Damien-Wright

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

logs the index :)

记录索引:)

a more detailed example is below.

下面是一个更详细的例子。

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>

回答by Alex

jQuery takes care of this for you. The first argument to your .each()callback function is the index of the current iteration of the loop. The second being the current matched DOM element So:

jQuery 会为您处理这些。.each()回调函数的第一个参数是循环当前迭代的索引。第二个是当前匹配的 DOM 元素所以：

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

回答by 01001111

From the jQuery.each() documentation:

来自jQuery.each() 文档：

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

So you'll want to use:

所以你会想要使用：

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

...where index will be the index and element will be the option element in list

...其中 index 将是索引， element 将是列表中的选项元素

回答by Saurabh Chandra Patel

surprise to see that no have given this syntax.

惊讶地看到没有给出这种语法。

.eachsyntax with data or collection

.each带有数据或集合的语法

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

OR

或者

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

回答by Ives.me

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