728x90
반응형
안녕하세요. 터미네입니다.
이번 포스팅은 jQuery each문 사용을 소개합니다.
each문 사용은 언제쓰냐면,
해당요소에 대해 여러개의 요소들을 처리할 때 사용합니다.
제가 요소라고 부르는 곳에는
id(#id) , class(.class), 태그명(div, ul, li) 등등이 있습니다
$(요소).each(function (index, item) {
~~ 중략 ~~
});
그럼, html과 같이 사용해보도록 하겠습니다.
html에 div의 class명 fruit로 해보겠습니다.
<html>
<head>
<script>
~~~~~
</script>
</head>
<body>
<div class="fruit" id="apple">
사과
</div>
<div class="fruit" id="banana">
바나나
</div>
<div class="fruit" id="strawberry">
딸기
</div>
<div>
땅콩
</div>
</body>
</html>
class가 fruit인 div는 세 개이고
div는 네 개입니다.
jQuery each문 두 개를 작성해보면 아래와 같습니다.
1) class fruit 요소에 대한 each문
<script>
function checkCountFruit(){
$(".fruit").each(function (index, item) {
console.log(index + '번째는 ' + $(this).text().trim() + ' id는 ' + item.id);
});
}
</script>
2) div 네 개에 대한 each문
<script>
function checkCountFruit(){
$("div").each(function (index, item) {
console.log(index + '번째는 ' + $(this).text().trim() + ' id는 ' + item.id);
});
}
</script>
결과는 어떻게 나올까요?
결과 확인인 브라우저 개발자 도구에 Console에서 확인하시면 됩니다.
1) 결과
0번째는 사과 id는 apple
1번째는 바나나 id는 banana
2번째는 딸기 id는 strawberry
2) 결과
0번째는 사과 id는 apple
1번째는 바나나 id는 banana
2번째는 딸기 id는 strawberry
3번째는 땅콩 id는
item에 담긴 값들은 해당요소의 html값을 반환하고 해당 요소안의 속성값을
. 점을 활용하여 값을 확인할 수 있습니다.
여기까지 jQuery의 each문에 대해 설명했습니다.
감사합니다.
728x90
반응형
'자바 웹 > front-end' 카테고리의 다른 글
| jQuery change함수 사용하기 (0) | 2023.01.18 |
|---|---|
| jQuery 라디오버튼 체크박스 사용하기 (0) | 2023.01.17 |
| jQuery this 사용법 (0) | 2023.01.11 |
| jQuery ajax 사용법 정리 (0) | 2023.01.09 |
| jQuery 부모 자식 요소 찾아 스타일 적용 (0) | 2023.01.06 |