메뉴 건너뛰기

XE Guidebook

Traversing
2016.08.22 19:53

04-04-01 each()

조회 수 4 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

● each()

 

each() 함수는 선택된 jQuery 집합에서 자동으로 요소들을 하나씩 꺼내
함수에 적용할 수 있도록 하는 메서드이다.  
 
for 문 등, 반복문을 사용하지 않고도 반복처리를 할 수 있으며,
"this" 키워드를 사용하여 각각의 <DOM> 요소에 쉽게 접근할 수 있다.
 
  each( function(index, element) )
 
 【매개변수】
  - index : 개체에 접근하기 위한 순서 값으로 0에서부터 시작한다.
  - element : 현재 each 함수에 의해 선택된 HTML 개체이다.(jQuery 개체가 아님) 
 
 

( 예제 )

버튼을 클릭하면,
"#color-box" 요소 안에 있는 <div> 태그를 "each()" 함수가 하나씩 접근하여,
해당 요소의 배경색을 "#f60"으로 바꾸다가
접근한 요소의 id가 "stop"이면, 
배경색 변경이 멈추어진 "index"를 출력하여 <span> 태그에 텍스트를 입력하고 함수를 종료한다.
  
  <script>
    $( "button" ).click(function() {
      $( "#color-box div" ).each(function( index, element ) {   // element == this
        $( element ).css( "backgroundColor", "#f60" );
        if ( $( this ).is( "#stop" ) ) {
          $( "#color-box span" ).text( "Stopped at div index #" + index );
          return false;
        }
      });
    });
  </script>

04-04-05-1 Miscellaneous each().gif

 

( 소스 )
 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Hi jQuery! - 탐색 (Traversing) </title>
    <style>
      body {
        padding:0 20px;
      }
      #container {
        padding:20px;
        background-color:#eee;
        border:1px solid #bbb;
        border-radius:20px;
      }
      #color-box {
        width:440px;
        height:100px;
        margin: 10px auto;
        text-align: center;
      }
      #color-box div {
        float: left;
        width: 40px;
        height: 40px;
        margin: 5px;
        border: 2px solid #00f;
      }
      #color-box span {
        color: #f00;
      }
      #btn-wrapper {
        margin-top:20px;
        text-align:center;
      }
    </style>
    <script src="jquery-3.1.0.min.js"></script>
  </head>
  <body>
    <div id="title">
      <h2> Miscellaneous Traverse <span> each()</span> </h2>
    </div>
    <div id="container">
      <div id="color-box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div id="stop">Stop here</div>
        <div></div>
        <div></div>
        <div></div>
        <span></span>
      </div>
      <div id="btn-wrapper">
        <button id ="btn-q" title="">Change colors</button>
      </div>
    </div>
    <div id="description">
      <div class="subject">
      </div>
      <div class="sub-text">
      </div>
    </div>
    <script>
      $( "button" ).click(function() {
        $( "#color-box div" ).each(function( index, element ) {
          // element == this
          $( element ).css( "backgroundColor", "#f60" );
          if ( $( this ).is( "#stop" ) ) {
            $( "#color-box span" ).text( "Stopped at div index #" + index );
            return false;
          }
        });
      });
    </script>
  </body>
</html>



List of Articles
번호 분류 제목 글쓴이
63 JQuery 개요 01-01 jQuery란? file happiziger
62 JQuery 개요 01-02 jQuery 기능 happiziger
61 JQuery 개요 01-03 jQuery 라이브러리의 설치와 사용 file happiziger
60 JQuery 개요 01-04 jQuery 맛보기 예제 file happiziger
59 JQuery Core 02-01 jQuery Core file happiziger
58 JQuery Core 02-02 jQuery()를 이용하여 jQuery object를 생성하는 방법 happiziger
57 JQuery Core 02-03 jQuery 스크립트의 작성 위치와 문서준비이벤트의 사용 happiziger
56 JQuery Core 02-04 jQuery의 단축 표현인 “$” 변경하기 file happiziger
55 Selector 03-01 jQuery Selector 의의와 종류 happiziger
54 Selector 03-02 기본 셀렉터(Basic Selector) file happiziger
53 Selector 03-03 계층 선택자 (Hierarchy selector) file happiziger
52 Selector 03-04 속성 선택자 (Attribute Selector) file happiziger
51 Selector 03-05 기본 필터 선택자 (Basic Filter) file happiziger
50 Selector 03-06 내용 필터 선택자 (Content Filter) file happiziger
49 Selector 03-07 보임 필터 선택자 (Visibility Filter) file happiziger
48 Selector 03-08 자식 요소 필터 선택자 (Child Filter) file happiziger
47 Selector 03-09 폼 선택자 happiziger
46 Traversing 04-01 Traversing(탐색)의 개념 happiziger
45 Traversing 04-02 트리 구조 탐색 (Tree Traversal) file happiziger
44 Traversing 04-03 필터링 (Filtering) file happiziger
Board Pagination Prev 1 2 3 4 Next
/ 4