회사 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 > 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에서 찾아볼 수 있다.

[소스코드]