$('#list option').each(function(index){
//do stuff
console.log(index);
});
logs the index :)
a more detailed example is below.
function run_each() {_x000D_
_x000D_
var $results = $(".results");_x000D_
_x000D_
$results.empty();_x000D_
_x000D_
$results.append("==================== START 1st each ====================");_x000D_
console.log("==================== START 1st each ====================");_x000D_
_x000D_
$('#my_select option').each(function(index, value) {_x000D_
$results.append("<br>");_x000D_
// log the index_x000D_
$results.append("index: " + index);_x000D_
$results.append("<br>");_x000D_
console.log("index: " + index);_x000D_
// logs the element_x000D_
// $results.append(value); this would actually remove the element_x000D_
$results.append("<br>");_x000D_
console.log(value);_x000D_
// logs element property_x000D_
$results.append(value.innerHTML);_x000D_
$results.append("<br>");_x000D_
console.log(value.innerHTML);_x000D_
// logs element property_x000D_
$results.append(this.text);_x000D_
$results.append("<br>");_x000D_
console.log(this.text);_x000D_
// jquery_x000D_
$results.append($(this).text());_x000D_
$results.append("<br>");_x000D_
console.log($(this).text());_x000D_
_x000D_
// BEGIN just to see what would happen if nesting an .each within an .each_x000D_
$('p').each(function(index) {_x000D_
$results.append("==================== nested each");_x000D_
$results.append("<br>");_x000D_
$results.append("nested each index: " + index);_x000D_
$results.append("<br>");_x000D_
console.log(index);_x000D_
});_x000D_
// END just to see what would happen if nesting an .each within an .each_x000D_
_x000D_
});_x000D_
_x000D_
$results.append("<br>");_x000D_
$results.append("==================== START 2nd each ====================");_x000D_
console.log("");_x000D_
console.log("==================== START 2nd each ====================");_x000D_
_x000D_
_x000D_
$('ul li').each(function(index, value) {_x000D_
$results.append("<br>");_x000D_
// log the index_x000D_
$results.append("index: " + index);_x000D_
$results.append("<br>");_x000D_
console.log(index);_x000D_
// logs the element_x000D_
// $results.append(value); this would actually remove the element_x000D_
$results.append("<br>");_x000D_
console.log(value);_x000D_
// logs element property_x000D_
$results.append(value.innerHTML);_x000D_
$results.append("<br>");_x000D_
console.log(value.innerHTML);_x000D_
// logs element property_x000D_
$results.append(this.innerHTML);_x000D_
$results.append("<br>");_x000D_
console.log(this.innerHTML);_x000D_
// jquery_x000D_
$results.append($(this).text());_x000D_
$results.append("<br>");_x000D_
console.log($(this).text());_x000D_
});_x000D_
_x000D_
}_x000D_
_x000D_
_x000D_
_x000D_
$(document).on("click", ".clicker", function() {_x000D_
_x000D_
run_each();_x000D_
_x000D_
});
_x000D_
.results {_x000D_
background: #000;_x000D_
height: 150px;_x000D_
overflow: auto;_x000D_
color: lime;_x000D_
font-family: arial;_x000D_
padding: 20px;_x000D_
}_x000D_
_x000D_
.container {_x000D_
display: flex;_x000D_
}_x000D_
_x000D_
.one,_x000D_
.two,_x000D_
.three {_x000D_
width: 33.3%;_x000D_
}_x000D_
_x000D_
.one {_x000D_
background: yellow;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
.two {_x000D_
background: pink;_x000D_
}_x000D_
_x000D_
.three {_x000D_
background: darkgray;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<div class="container">_x000D_
_x000D_
<div class="one">_x000D_
<select id="my_select">_x000D_
<option>apple</option>_x000D_
<option>orange</option>_x000D_
<option>pear</option>_x000D_
</select>_x000D_
</div>_x000D_
_x000D_
<div class="two">_x000D_
<ul id="my_list">_x000D_
<li>canada</li>_x000D_
<li>america</li>_x000D_
<li>france</li>_x000D_
</ul>_x000D_
</div>_x000D_
_x000D_
<div class="three">_x000D_
<p>do</p>_x000D_
<p>re</p>_x000D_
<p>me</p>_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
_x000D_
<button class="clicker">run_each()</button>_x000D_
_x000D_
_x000D_
<div class="results">_x000D_
_x000D_
_x000D_
</div>
_x000D_