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>COREASUR :: 제이쿼리 강좌</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>COREASUR :: 제이쿼리 강좌</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>COREASUR :: 제이쿼리 강좌</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>COREASUR :: 제이쿼리 강좌</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클래스가 적용되어 하늘색으로 배경이 적용되었습니다.