jQuery
each로 태그 다루기
each로 태그 다루기
이번시간에는 each에 대해서 알아보겠습니다.
다음의 코드가 있다고 할 때 각각의 태그의 텍스트에 번호를 매긴다면 어떻게 해야 할까요?
<p>haro</p> <p>haro</p> <p>haro</p> <p>haro</p> <p>haro</p>
저라면 이렇게 할겁니다.
먼저 각 태그의 수만큼 for문을 돌려서 태그에 접근하여 text()메서드를 사용해 텍스트를 변경합니다.
다음과 같이요.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>pinkcoding :: 제이쿼리 강좌</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
for(i = 1; i <= $('p').length; i++){
txt = $('p:nth-child('+i+')').text() + i;
$('p:nth-child('+i+')').text(txt);
}
});
</script>
</head>
<body>
<p>haro</p>
<p>haro</p>
<p>haro</p>
<p>haro</p>
<p>haro</p>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
하지만 위와 같이 for 반복문을 사용하지 않고 each를 통해서도 가능합니다.
each 사용방법
$('p').each(function(idx){
})
idx는 인덱스(index)를 의미하며 각 p태그의 순서 값이 나타납니다. 순서는 0부터 시작합니다.
그러면 each를 사용해서 제가 위해서 해본것을 똑같은 결과가 나오게 해본다면...
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>pinkcoding :: 제이쿼리 강좌</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('p').each(function(idx){
txt = $(this).text() + (idx + 1);
$(this).text(txt);
})
});
</script>
</head>
<body>
<p>haro</p>
<p>haro</p>
<p>haro</p>
<p>haro</p>
<p>haro</p>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
만약 다음과 같은 input 박스 입력창이 있다고 할 때
<input type="text" value="haro" /> <input type="text" value="haro" /> <input type="text" value="haro" /> <input type="text" value="haro" />
위의 type속성의 값을 모두 button으로 바꾸는것도 each를 사용해서 가능합니다.
앞에서 배운 attr() 메서드를 활용면 간단하죠. ^^
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>pinkcoding :: 제이쿼리 강좌</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('input').each(function(){
$(this).attr('type','button');
})
});
</script>
</head>
<body>
<input type="text" value="haro" />
<input type="text" value="haro" />
<input type="text" value="haro" />
<input type="text" value="haro" />
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
html코드는 text 입력박스지만 결과는 모두 button으로 바뀌어있습니다.
한번 더 해봅시다.
특정 클래스를 추가해볼게요.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>pinkcoding :: 제이쿼리 강좌</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('input').each(function(){
$(this).addClass('haro');
})
});
</script>
<style>
.haro{background:skyblue}
</style>
</head>
<body>
<input type="text" value="haro" />
<input type="text" value="haro" />
<input type="text" value="haro" />
<input type="text" value="haro" />
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
css로 haro 클래스의 배경색을 하늘색으로 적용하는 코드를 작성하고 input태그에 haro클래스를 적용했습니다.
결과를 보니 input태그에 haro클래스가 적용되어 하늘색으로 배경이 적용되었습니다.
