jQuery .each() 索引？

Posted 2023-03-16

【中文标题】jQuery .each() 索引？

【英文标题】：jQuery .each() index?

【发布时间】：2011-05-19 12:34:51

【问题描述】：

我正在使用

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

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

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

【参考方案1】：

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

记录索引:)

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

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>

【讨论】：

而 not，例如 function( value | element, index | key )，就像等效的原生方法 forEach 和所有其他流行的 API。

通常使用 console.log 调试比使用警报更好。大的选项列表会用警报破坏你的窗口堆栈。

function(index | key , value | element ) 是否有效..？

【参考方案2】：

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

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

【参考方案3】：

来自jQuery.each() documentation：

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

所以你会想要使用：

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

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

【参考方案4】：

惊讶地发现没有人给出这种语法。

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

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

或

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

【参考方案5】：

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