jquery reverse (find each 거꾸로 찾기)

jquery를 이용해서 테이블(html table) 안의 요소나 혹은 객체 안에 요소 또는 객체를 찾을 때 보통 find를 사용합니다. 단일 요소(객체)라면 해당하는 id를 jquery의 find를 사용하여 찾지만 checkbox와 같은 컨트롤 객체의 체크된 값들을 찾으려면 jquery의 each를 사용합니다.

each는 해당 객체의 첫번째 부터 아래로 찾아 내려가는 형식입니다. 하지만, 특이하게도 거꾸로 마지막 부터 위로 첫번째까지 찾아야 하는 경우가 생깁니다. 이럴때는 어떻게 할까요?

하여 오늘은 jquery reverse (find each 거꾸로 찾기)에 대해서 알아보겠습니다.

일단, head태그에 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>를 삽입합니다. jquery를 사용하려면 꼭 필요합니다. 최신 버전의 jquery를 사용하겠다는 스크립트 입니다.

그리고 html에 아래와 같이 checkbox들을 만들어 주세요.

<table>
 <tr>
  <td><input type="checkbox" id="chk1" name="chk" value="01" /> 01</td>
  <td><input type="checkbox" id="chk2" name="chk" value="02" /> 02</td>
  <td><input type="checkbox" id="chk3" name="chk" value="03" /> 03</td>
  <td><input type="checkbox" id="chk4" name="chk" value="04" /> 04</td>
  <td><input type="checkbox" id="chk5" name="chk" value="05" /> 05</td>
  <td><input type="checkbox" id="chk6" name="chk" value="06" /> 06</td>
  <td><input type="checkbox" id="chk7" name="chk" value="07" /> 07</td>
  <td><input type="checkbox" id="chk8" name="chk" value="08" /> 08</td>
  <td><input type="checkbox" id="chk9" name="chk" value="09" /> 09</td>
  <td><input type="checkbox" id="chk10" name="chk" value="10" /> 10</td>
  <td><input type="checkbox" id="chk11" name="chk" value="11" /> 11</td>
  <td><input type="checkbox" id="chk12" name="chk" value="12" /> 12</td>
  <td><input type="checkbox" id="chk13" name="chk" value="13" /> 13</td>
  <td><input type="checkbox" id="chk14" name="chk" value="14" /> 14</td>
  <td><input type="checkbox" id="chk15" name="chk" value="15" /> 15</td>
  <td><input type="checkbox" id="chk16" name="chk" value="16" /> 16</td>
  <td><input type="checkbox" id="chk17" name="chk" value="17" /> 17</td>
  <td><input type="checkbox" id="chk18" name="chk" value="18" /> 18</td>
  <td><input type="checkbox" id="chk19" name="chk" value="19" /> 19</td>
  <td><input type="checkbox" id="chk20" name="chk" value="20" /> 20</td>
 </tr>
</table>

<button onclick="reverseCheck()">거꾸로 찾기(거꾸로 체크해봅시다)</button>

그리고 실험할 버튼을 위와 같이 하나 만들어 주세요.




그리고 제일 중요한 버튼 클릭 함수를 아래와 같이 만들어주세요.
function reverseCheck()
{
 $( $("[type=checkbox]").get().reverse() ).each(function( index )
 {
  var obj = $(this);
  setTimeout(function(){
   $(obj).prop("checked", true);}, 100*index
  );
 });
}
실험을 위해서 거꾸로 체크되는 함수를 만들었습니다.

이와는 반대로 일반적으로 사용하는 첫번째 요소부터 마지막 요소(위에서 아래로)까지 체크되는 함수는 reverse를 빼면 됩니다. 아래와 같이 말이지요...ㅎ

function reverseCheck()
{
 $( $("[type=checkbox]") ).each(function( index )
 {
  var obj = $(this);
  setTimeout(function(){
   $(obj).prop("checked", true);}, 100*index
  );
 });
}




어떠신가요? 엄청 쉽줘...뭐든지 알면 쉬운데...모를때는 아~~~ㅎㅎㅎ
이상 jquery reverse (find each 거꾸로 찾기)에 대해서 알아보았습니다.
필요하신 분들에게 도움이 되었으면 좋겠네요...ㅎ
도움이 되셨다면 댓글로 표현해주세요~~~ㅎ
오늘도 좋은 하루 되세요~~~^^