PinkCoding

CLASS web

jQuery

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>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

하지만 위와 같이 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>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

만약 다음과 같은 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>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

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>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

css로 haro 클래스의 배경색을 하늘색으로 적용하는 코드를 작성하고 input태그에 haro클래스를 적용했습니다.