본문 바로가기

Programming/JQuery

jQuery Traverse - Filtering

jQuery에서 지원하는 Traverse 메서드는 HTML을 가로지르거나, 횡단하는 것 처럼 탐색하는 역할을 한다.

Traverse 메소드는 간단하게 셀렉터를 통해 선택한 개체에서 다시 한번 개체를 찾고, 필터링하고, 추가하는 작업을 쉽게 구현 할 수 있도록 도와주는 메서드라고 생각 하면 된다.

물론 기존의 셀렉터를 통해서도 충분히 원하는 개체를 탐색하거나, 선택 하는데 큰 지장이 없다만, Traverse 메소드를 이용하면 셀렉터를 통해 가져온 개체를 즉 1차 결과물에 추가적인 작업을 통해 2차, 3차 등의 결과를 쉽게 얻을 수 있다는 큰 장점이 있다.

이러한 Traverse 메소드는 크게 Filtering, Miscellaneous Traverse, Tree Traverse 3가지로 구분을 하고 있다.

 

[Filtering 메소드의 종류]

 메소드 종류(형식)  설명
 .eq(index)  선택한 요소들 중에서 인덱스와 일치하는 단일 요소를 선택 반환한다. 
 .filter(expr)  선택한 요소에서 표현식(expr)과 일치하는 요소의 집합을 선택 반환합니다.
 표현식에는 selector, function, element, jQuery object가 올 수 있다.
 .first()  선택한 요소에서 첫 번째 단일 요소를 선택 반환한다.
 .has(selector)  선택한 요소에서 selector항목을 가지고 잇는 요소의 집합을 선택 반환한다. 
 .last()  .first()와 반대되는 메소드로서, 마지막 단일 요소를 선택 반환한다. 
 .map(callback)   jQuery 개체에 있는 요소의 집합을 다른 집합으로 변경해서 이동시킨다. 
 .not(expr)  표현식과 일치하지 않는 요소의 집합을 선택 반환한다. 
 .slice(start, [end]  선택한 요소에서 start, end번 째에 해당하는 집합을 선택 반환한다. 
 .is(expr)  표현식과 일치하는 조건이 있으면 true를 반환한다.
 표현식에는 selector, function, element, jQuery object가 올 수 있다.

 

이 중 몇 가지 메소드는 셀렉터의 필터와 겹치는 내용이 있는데, 대표적으로 first(), last(), eq(), not() 메소드가 있다.

비교를 하자면,

$(“td:eq(0)”) == $(“td”).eq(0)

$(“td:first”) == $(“td”).first()

$(“td:last”) == $(“td”).last()

$(“td:not(‘.myClass’)”) == $(“td”).not(“.myClass”)

와 같이 사용이 되어지는데, 결과는 동일하다.

 

[ .filter(expr) ]

1차적으로 셀렉터를 통해 선택한 요소들의 집합에서 또 한 번의 필터링을 통해 원하는 개체를 선택하는 메소드

이 메소드 또한 위와 같이 $(“td:even”) == $(“td”).filter(“:even”) 로 사용되어지는데, 앞의 메소드와는 달리 filter 메소드의 장점은 function을 이용하여 마치 필터를 확장해서 쓰는 것과 같다는 점이다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />   
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("td").filter(function (index) {
                return index % 3 == 0;
            }).css("background", "red");
        });

    </script>
</head>
<body style="padding:10px;">
    <div>
    <table>
        <tr>
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr>
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr>
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>
    </table>
    </div>
</body>
</html>

 

function(index) index는 $(“td”)를 통해 가져온 개체 집합의 번호이다. 이 filter를 이용하여 집합의 번호가 3의 배수일 때마다 배경색을 빨간색으로 지정해준다.

 

[ .not() ]

필터 메소드와는 반대로 동작하는 메소드이다.

필터 메소드는 표현식과 일치하는 요소를 선택하는 반면 .not() 메소드는 표현식과 일치하지 않는 요소를 선택 반환한다.

<script type="text/javascript">
    $(document).ready(function () {
        $("td").not(function (index) {
            return index % 3 == 0;
        }).css("background", "red");

    });
</script>

위의 filter 소스에서 filter부분을 not으로 변경하여 테스트를 한다.

 

처음 filter의 결과와는 반대로 3의 배수가 아닌 것들의 배경색이 변경되어 나타남을 확인 할 수 있다.

 

[ .has(Selector) ]

기본 셀렉터를 통해 가져온 개체의 집합에서 selector에 해당하는 요소를 가진 개체만을 선택 반환

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />   
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("li").has("ul").css("background", "red");
        });

    </script>
</head>
<body style="padding:10px;">
    <div>
        <ul>
            <li>list item 1</li>
            <li>list item 2
                <ul>
                    <li>list item 2-a</li>
                    <li>list item 2-b</li>
                </ul>
            </li>
            <li>list item 3</li>
            <li>list item 4 <ul></ul></li>
        </ul>
    </div>
</body>
</html>

셀렉터를 통해 가져온 li개체들 중에서 has() 함수를 통해 “ul” 요소를 가지고 있는 개체만을 선택 하는걸 확인 할 수 있다.

 

[ .is(Expr) ]

기본 셀렉터에서 가져온 개체의 집합에서 표현 식과 일치하는 부분이 있는지에 대한 여부를 반환합니다

집합에서 단 하나라도 일치하는 항목이 존재한다면 “true”를 반환하고, 일치하는 항목이 존재하지 않다면 “false”를 반환한다.

    <script type="text/javascript">
        $(document).ready(function () {
            $("*").each(function () {
                if ($(this).is("li")) {
                    $(this).css("border", "1px solid red"); 
                }
            });

        });
    </script>

위의 소스에서 스크립트 부분만 수정해준다.

모든 요소를 선택하고 “each()”라는 메소드를 통해서 개체의 집합에 접근 후 “li”와 동일한 요소일 경우 지정한 스타일이 적용된 걸 확인 할 수 있다.

“each()” 라는 메소드는 jQuery를 통해 가져온 개체의 집합을 foreach와 같이 순환하는 기능을 제공한다.

위의 소스의 if ($(this).is("li")) 의 부분에서 "li"를 "ul"로 수정해주면 아래와 같은 결과를 확인 할 수 있다.

 

[ .map(callback) ]

Callback 함수를 이용하여 셀렉터를 이용해 가져온 개체의 집합에서 원하는 작업을 진행하고 해당 작업의 결과를 jQuery의 배열 형식으로 반환 할 수 있다.

    <script type="text/javascript">
        $(document).ready(function () {
            var liText = $("li").map(function (index) {
                return "[(" + index + ")" + $(this).text() + "]";
            }).get().join(',');
            $("#result").text(liText);

        });
    </script>
    소스부분 하단에 추가 
   <div>
        Result : <span id="result"></span>
    </div>

“li” 요소를 선택 후 해당 개체의 text값을 map() 메서드를 통해 반환하고 해당 값들을 id가 result인 것을 찾아 그 곳에 값들을 뿌려준다.

 

[ .slice(start, [end] ]

선택한 요소에서 start번째에서 시작하여 end번째에 끝나는 개체의 집합을 반환

기본 셀렉터에서 선택된 요소는 0부터 시작, start는 포함을 하나 end번째 요소는 포함하지 않는다.

총 8개의 요소를 선택했다고 가정하고, 각 요소의 집합에 번호를 주면, 해당 인덱스는 0부터 시작이므로 0, 1, 2, 3, 4, 5, 6, 7이 된다.

1) .slice(2) 경우 : 2, 3, 4, 5, 6, 7에 해당하는 개체의 집합을 반환.

- 0, 1, 2, 3, 4, 5, 6, 7 앞에서 2개의 집합을 제거

2) .slice(2,4) 경우 : 2, 3 에 해당하는 개체의 집합을 반환.

- 0, 1, 2, 3, 4, 5, 6, 7 앞에서 2개의 집합을 동일하게 제거 후 4번째를 포함한 집합을 한번 더 제거 후 반환

<html>
<head>
  <style>
  div { width:40px; height:40px; margin:10px; float:left;
        border:2px solid blue; }
  span { color:red; font-weight:bold; }
  button { margin:5px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><button>Turn slice yellow</button>
  <span>Click the button!</span></p>
  <div>0</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>

  <
script>
    function colorEm() {
      var $div = $("div");
      var start = Math.floor(Math.random() * $div.length);
      var end = Math.floor(Math.random() ($div.length - start)) + start + 1;
      if (end == $div.length) 
         end
= undefined;
      $div.css("background", "");
     
     if (end)
        $div.slice(start, end).css("background", "yellow");   
     else
        $div.slice(start).css("background", "yellow");
      
      $("span").text('$("div").slice(' + start + (end ? ', ' + end : '') +
        ').css("background",  "yellow");');
    }
    $("button").click(colorEm);

</script>
</body>
</html>

 

 < $div.slice(start, end) 일경우 - start 2부터 end 7 이전까지의 div에 배경색을 확인 할 수 있다. >

< $div.slice(start) 일경우 -start 2부터 끝까지의 div에 배경색을 확인 할 수 있다. >

 

원본 : http://www.sqler.com/387660

'Programming > JQuery' 카테고리의 다른 글

jQuery Traverse - Tree Traversal  (0) 2012.04.20
jQuery Traverse - Miscellaneous Traversing  (0) 2012.04.20
jQuery Callback Functions  (0) 2012.04.19
jQuery Ajax memory leak  (0) 2012.04.05
jQuery Ajax 에러 처리  (0) 2012.04.05