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을 이용하여 마치 필터를 확장해서 쓰는 것과 같다는 점이다.
<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() 메소드는 표현식과 일치하지 않는 요소를 선택 반환한다.
$(document).ready(function () {
$("td").not(function (index) {
return index % 3 == 0;
}).css("background", "red");
});
</script>
위의 filter 소스에서 filter부분을 not으로 변경하여 테스트를 한다.
처음 filter의 결과와는 반대로 3의 배수가 아닌 것들의 배경색이 변경되어 나타남을 확인 할 수 있다.
[ .has(Selector) ]
기본 셀렉터를 통해 가져온 개체의 집합에서 selector에 해당하는 요소를 가진 개체만을 선택 반환
<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”를 반환한다.
$(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의 배열 형식으로 반환 할 수 있다.
$(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번째를 포함한 집합을 한번 더 제거 후 반환
<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에 배경색을 확인 할 수 있다. >
'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 |
