happy cat image

everdevel

Be Magical

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.
























EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

방문해 주셔서 감사합니다.

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>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>

결과는 바로 아래에서 확인하겠습니다.

each

하지만 위와 같이 for 반복문을 사용하지 않고 each를 통해서도 가능합니다.

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>

결과는 바로 아래에서 확인하겠습니다.

each

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

결과는 바로 아래에서 확인하겠습니다.

each

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클래스를 적용했습니다.

each

결과를 보니 input태그에 haro클래스가 적용되어 하늘색으로 배경이 적용되었습니다.


봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준