태그 반복문

jQuery용 for문인 each() 함수에 대해서 알아보자.

each()

해당 요소를 반복해서 검사하는 함수
셀렉터 기준으로 반복한다.
Parameter
- index : 반복문이 몇 바퀴 째인지 알 수 있는 인덱스 (for문의 i)
- element : 현재 반복문에서 셀렉트되는 요소 (this를 대신 사용 가능)
```
<script type="text/javascript">
		$(function() {
				$("selector").each(function(index, element) {
							// 반복 내용
				});	
		});
</script>
```

Selector로 DOM 객체를 얻어와 each() 함수에서 사용

each() 함수를 이용하여 태그의 값을 가져온다.

<script type="text/javascript">
		$(function() {
				$("div").each(function(index) {
						 // $("div").eq(index) = $(this)
						 const txt = $("div").eq(index).find("input[type=text]").val();
						 const txt = $(this).find("input[type=text]").val();

						 console.log("text value = ", txt);
						 // text value =  첫번째 값
						 // text value =  두번째 값
						 
						 if(index === 1){ // 0, 1, 종료
								 return false; // break;
						 }
				});
		});
</script>

<body>
		<div>
				<input type="text" value="첫번째 값">
		</div>
		<div>
				<input type="text" value="두번째 값">
		</div>
		<div>
				<input type="text" value="세번째 값">
		</div>
		<div>
				<input type="text" value="네번째 값">
		</div>
</body>

배열

$.each( array, callback );

첫 번째 매개변수로 넘어온 배열의 0번 index 요소부터 한 번씩 순회할 때마다 콜백 함수를 실행

var arr = [
    { name: 'James', age: 25 },
    { name: 'Lucy', age: 24 }
];

$.each(arr, function (index, value) {
    var result = '';
    result += index + ' : ' + value.name + ', ' + value.age;
    console.log(result);
})

//출력 결과
//0 : James, 25
//1 : Lucy, 24

객체

$.each( object, callback );
첫 번째 인수로 객체나 Map등을 넘겨주는 경우에는 속성, 함수, 메서드를 포함한 모든 멤버를 반복하여 순회

이때 콜백 함수의 매개변수는 순서대로 key(property)와 키 값이 된다.

var sampleObj = {
    name : "John",
    age : 28,
    printInfo : function(){
        console.log(name + ', ' + age);
    }
};

$.each(sampleObj, function(attrName, attrValue){
    console.log(attrName +" : " +attrValue);
})

//출력 결과
name : John
age : 28
printInfo : function(){
    console.log(name + ', ' + age);
}