방문해 주셔서 감사합니다.
이번시간에는 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>EVERDEVEL :: 제이쿼리 강좌</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를 통해서도 가능합니다.
$('p').each(function(idx){
})
idx는 인덱스(index)를 의미하며 각 p태그의 순서 값이 나타납니다. 순서는 0부터 시작합니다.
그러면 each를 사용해서 제가 위해서 해본것을 똑같은 결과가 나오게 해본다면...
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</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>EVERDEVEL :: 제이쿼리 강좌</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>EVERDEVEL :: 제이쿼리 강좌</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클래스가 적용되어 하늘색으로 배경이 적용되었습니다.
봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.
컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.
컨텐츠
더보기
댓글 0개
정렬기준
