나는 사용하고있다
$('#list option').each(function(){
//do stuff
});
목록의 옵션을 반복합니다. 현재 루프의 인덱스를 어떻게 얻을 수 있는지 궁금합니다.
나는 var i = 0을 가질 필요가 없기 때문에; 루프 내부에는 i ++가 있습니다.
답변
$('#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>
답변
jQuery가이를 처리합니다. .each()
콜백 함수 의 첫 번째 인수 는 현재 루프 반복의 인덱스입니다. 두 번째는 현재 일치하는 DOM 요소입니다.
$('#list option').each(function(index, element){
alert("Iteration: " + index)
});
답변
로부터 jQuery.each () 문서 :
.each( function(index, Element) )
function(index, Element)A function to execute for each matched element.
따라서 다음을 사용하고 싶을 것입니다.
$('#list option').each(function(i,e){
//do stuff
});
… 인덱스는 인덱스가되고 요소는 목록의 옵션 요소가됩니다.
답변
이 구문을 제공 한 사람이 없다는 사실에 놀랐습니다.
.each
데이터 또는 컬렉션 구문
jQuery.each(collection, callback(indexInArray, valueOfElement));
또는
jQuery.each( jQuery('#list option'), function(indexInArray, valueOfElement){
//your code here
});
답변
$('#list option').each(function(intIndex){
//do stuff
});