[jquery].each 테스트 예제

회사 jquery의 each에 대한 소스를 보던 중.. 이해 안가는 부분이 있어 예제를 만들어 보았다.

(1) 먼저 jquery 스크립트가 없는 일반적인 테이블 그림이다.

   

<table class="test" border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
<pre>

(2) 이걸 each api를 써서 번호를 거꾸로 쓰는 예제를 만들어 보았다.

$(document).ready(function() {
 var cnt = 6;

 $('.test tr:first td').each(function(k, v) {
 $('.test tr').each(function() {
     var $table = $(this);
     $table.find("td").eq(k).html(cnt);

     if(cnt &gt; 3) {
         $table.find("td").eq(k).css('background-color', 'red');
     }else{
         $table.find("td").eq(k).css('background-color', 'yellow');
     }
     cnt--;
     });
   });
});

처음엔 머리로만 소스를 이해하려고 하다보니, 왜 왼쪽부터 아래로 내려가며 순번이

매겨질까 한참을 생각하다가, 역시 예제코드를 보며 알게 되었다.

역시 개발자는 백문이 불여일타라는 생각이 다시 들었다.

jquery each api에 대한 링크는 jquery each API에서 찾아볼 수 있다.

[소스코드]

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

w

%s에 연결하는 중