jQuery Traverse - Filtering
jQuery의 탐색(Traverse) 메서드를 이용하여 셀렉터에 날개를 달자
“Traverse”는 위에 보시는 바와 같이 가로지르다, 횡단이란 뜻을 가지고 있으며, jQuery에서 지원하는 Traverse 메서드 또한 HTML을 가로지르거나, 횡단하는 것 처럼 탐색하는 역할을 합니다. 해당 메서드를 간략히 설명하면 셀렉터를 통해 선택한 개체에서 다시 한번 개체를 찾고, 필터링하고, 추가하는 작업을 쉽게 구현 할 수 있도록 도와주는 메서드라고 생각 하시면 됩니다.
물론 기존의 셀렉터를 통해서도 충분히 원한는 개체를 탐색하거나, 선택 하는데 큰 지장이 없습니다만, 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항목을 가지고 있는 요소의 집합을 선택 반환합니다. |
|
.is(expr) |
표현식과 일치하는 조건이 있으면 true를 반환합니다. 표현식에는 selector, function, element, jQuery object가 올 수 있습니다. |
|
.last() |
.first() 와 반대되는 메서드로 마지막 단일 요소를 선택 반환합니다. |
|
.map(callback) |
jQuery 개체에 있는 요소의 집합을 다른 집합으로 변경해서 이동 시킵니다. |
|
.not(expr) |
표현식과 일치하지 않는 요소의 집합을 선택 반환합니다. |
|
.slice(start,[end] |
선택한 요소에서 start, end번 째에 해당하는 집합을 선택 반환합니다. |
| 표 1. [jQuery 탐색 필터 메서드 종류] | |
생각보다 많은 메서드를 제공하고 있으나, 이중에 몇 개는 기존에 설명 드렸던 셀렉터의 필터와 겹치는 내용이 있습니다.
대표적으로 first(), last(), eq(), not() 메서드를 들 수있습니다.
이전 필터와 살짝 비교를 하면 다음과 같습니다.
$(“td:eq(0)”) == $(“td”).eq(0)
$(“td:first”) == $(“td”).first()
$(“td:last”) == $(“td”).last()
$(“td:not(‘.myClass’)”) == $(“td”).not(“.myClass”)
양쪽다 모두 동일한 결과를 보입니다.
그런데, 결과적으로 동일한 역할을 하는데 왜 여러 개를 만들어 놓았을까요 ? 단순히 개발자의 맘일까요 ? 이번강의 앞 부분에 언급한 1차 결과물에 추가적인 작업과 이후에 설명을 드릴 miscellaneous항목에 존재하는 .end() 라는 메서드를 보시면 좀더 쉽게 이해가 되실꺼라 생각합니다.
이제부터는 앞서 비교한 메서드를 제외한 나머지 메서드에 대해 간단히 알아 보도록 하겠습니다.
.filter(expr)
1차적으로 셀렉터를 통해 선택한 요소들의 집합에서 또 한번의 필터링을 통해 원하는 개체를 선택하는 메서드입니다.
표현식 부분에는 Selector, function, element, jQuery object가 위치할 수 있습니다.
이 메서드 또한 앞의 필터와 중복되는 부분이 존재합니다. 간단한 예를 들면 다음과 같습니다.
$(“td:even”) == $(“td”).filter(“:even”)
동일한 결과를 나타냅니다. 하지만 필터 메서드의 강점은 function을 이용하여 마치 필터를 확장해서 쓰는것과 같은 효과를 얻을 수 있는 점입니다.
다음은 셀렉터를 통해 선택한 개체의 집합을 필터 메서드를 통해 3의 배수에 해당하는 요소를 선택하는 예제이며, function(index) index는 $(“li”)를 통해 가져온 개체 집합의 번호입니다.
<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;"> <h2>jQuery 시작 Selector</h2> <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p> <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>
[필터 메서드를 사용하여 3의 배수에 해당하는 요소에 스타일을 적용]
물론 위 예제는 자식필터(child filter)를 이용하여 구현이 가능합니만 여기서 눈 여겨 볼 내용은 이렇게 자신이 원하는 기능을 추가로 하여 개체를 선택 할 수 있다는 것입니다.
.not()
필터 메서드와는 반대로 동작하는 메서드입니다. 필터 메서드는 표현식과 일치하는 요소를 선택하는 반면에 이(.not()) 메서드는 표현식과 일치하지 않는 요소를 선택 반환합니다.
앞의 예제에서 스크립트만 변경을 해 보도록 하겠습니다.
<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").not(function (index) { return index % 3 == 0; }).css("background", "red"); }); </script> </head> <body style="padding:10px;"> <h2>jQuery 시작 Selector</h2> <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p> <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>
[앞의 결과와는 다르게 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;"> <h2>jQuery 시작 Selector</h2> <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p> <div> <ul> <li>list item 1</li> <li>list item 2 <ul> <li>list item 2-a</li