요소를 통한 jQuery 루프
HTML 요소를 반복하려면 .each() 메서드를 사용합니다. 이 함수의 초기에는 순회해야 하는 요소 트리를 선택합니다.
그리고 메서드의 괄호 안에 매개변수, 인덱스, 값을 갖는 함수를 더합니다.
이 과정에서 우리가 얻는 값은 대부분 text() 형식, 즉 문자열입니다. 숫자 목록을 처리해야 하는 경우 문자열로 가져오고 나중에 기본 설정에 따라 변환할 수 있습니다.
다음 예제에서는 요소를 반복하는 .each() 메서드의 개념을 명확히 하는 유사한 인스턴스를 시각화합니다.
.each() 메서드를 사용하여 목록 요소 반복
여기에서는 목록 스택이 있는 예를 설정합니다. 그리고 li를 중심으로 반복을 수행합니다.
따라서 .each() 메서드 직전에 루프 요소의 이름을 설정합니다. 그리고 나중에 인덱스와 값을 보유하기 위해 계정을 취하는 함수를 추가하십시오.
어떻게 작동하는지 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>array loop through</title>
</head>
<body>
<ul id="mylist">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var sum = 0;
$("li").each(function(index, elem){
sum+=parseInt( $( this ).text(), 10 );
});
console.log("Sum of the li elements: " + sum);
</script>
</div>
</body>
</html>
출력:
이 예제에서는 li의 인스턴스를 잡고 .each()를 사용했습니다. index 및 elem 매개변수는 각 요소에 대한 색인 번호와 HTML 개체 세부 정보를 저장합니다.
따라서 요소를 처리하는 것이 번거로울 것입니다. 그래서 li 콘텐츠를 text(string)로 검색하고 나중에 정수로 구문 분석했습니다.
인덱스가 작동하는 방식을 정의하는 또 다른 예를 살펴보겠습니다.
.each() 메서드를 사용하여 동일한 클래스의 테이블 데이터 계산
.each() 메서드의 기능을 이미 알고 있으므로 여기서는 결과를 시각화하기 위해 코드 세그먼트로 직접 이동합니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>array loop through</title>
</head>
<body>
<table class="tbl" border=2>
<tr>
<td>D1</td>
<td>D2</td>
</tr>
<tr>
<td>D3</td>
<td>D4</td>
</tr>
</table>
<script>
var cnt = 0;
var ar = []
$("td").each(function(index, elem){
$(elem).addClass('table');
});
$(".table").each(function(index, elem){
ar[cnt]=index;
cnt++;
});
console.log("Total data count: " + cnt);
console.log("The indexes: " + ar);
</script>
</div>
</body>
</html>
출력:
따라서 인덱스 매개변수는 숫자 값을 획득하므로 테이블 데이터의 수와 배열의 표현을 얻습니다.
또한 아래와 같이 elem 매개변수를 가져와 특정 클래스에서 동일한 분류 데이터의 이름을 지정할 수 있습니다.
$('td').each(function(index, elem) {
$(elem).addClass('table');
});
