jQuery .each() index?

Question

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

Answer 1

$('#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("
");
    // log the index
    $results.append("index: " + index);
    $results.append("
");
    console.log("index: " + index);
    // logs the element
    // $results.append(value);  this would actually remove the element
    $results.append("
");
    console.log(value);
    // logs element property
    $results.append(value.innerHTML);
    $results.append("
");
    console.log(value.innerHTML);
    // logs element property
    $results.append(this.text);
    $results.append("
");
    console.log(this.text);
    // jquery
    $results.append($(this).text());
    $results.append("
");
    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("
");
      $results.append("nested each index: " + index);
      $results.append("
");
      console.log(index);
    });
    // END just to see what would happen if nesting an .each within an .each

  });

  $results.append("
");
  $results.append("==================== START 2nd each ====================");
  console.log("");
  console.log("==================== START 2nd each ====================");


  $('ul li').each(function(index, value) {
    $results.append("
");
    // log the index
    $results.append("index: " + index);
    $results.append("
");
    console.log(index);
    // logs the element
    // $results.append(value); this would actually remove the element
    $results.append("
");
    console.log(value);
    // logs element property
    $results.append(value.innerHTML);
    $results.append("
");
    console.log(value.innerHTML);
    // logs element property
    $results.append(this.innerHTML);
    $results.append("
");
    console.log(this.innerHTML);
    // jquery
    $results.append($(this).text());
    $results.append("
");
    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;
}

  

    
      apple
      orange
      pear
    
  

  

    

      
canada
      
america
      
france
    
  

  

    
do
    
re
    
me
  



run_each()