본문 바로가기

Programming/JQuery

jQuery Traverse - Tree Traversal

[ Tree Traversal 메소드의 종류 ]

  메소드  메소드 설명 
 .children  선택된 개체의 자식 중 Selector와 동일한 요소를 가져온다. 
 .closest ([selector])  선택된 개체에서 DOM Tree를 통해 가장 가까운 조상 요소를 가져온다.
 .find ([selector])  선택된 개체에서 selector와 일치하는 요소를 가져온다.
 .next ([selector])  선택된 개체에서 selector와 일치하는 형제 요소를 가져온다.
 일치하는 항목이 없을 경우 다음 항목으로 이동해 요소를 찾는다.
 .parent ([selector])  선택된 개체에서 selector와 일치하는 부모의 요소를 가져온다.
 .prev ([selector])  선택된 개체에서 selector와 일치하는 바로 앞의 형제 요소를 가져온다.
 .siblings ([selector])  선택된 개체에서 selector와 일치하는 형제 요소를 가져온다.
 자신은 제외한다.

selector는 일종의 옵션으로 존재를 하며, selector의 사용여부는 일종의 필터링과 관계가 있고, selector가 있을 경우 selector와 일치하는 요소를 탐색하고, 없을 경우 가장 가까운 요소를 가져온다.

 

[ HTML DOM ]

Tree Traversal메소드를 이해하려면 HTML DOM 구조를 이해할 필요가 있다.

아래의 이미지는 간단한 HTML DOM 구조에 대한 예이다. (별 다른 설명이 없어도,,,)

 

[ .children() ]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />   
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
     $(document).ready(function () {
         $("div").children().css("border-bottom", "3px double red");
     });
    </script>
</head>
<body>
    <p>Tree Traversal Children Test 1</p>
    <div>
        <span>Tree Traversal Children Test 2</span>
    </div>
    <p>Tree Traversal <span>Children</span> Test 3</p>
    <div>
        Tree Traversal <span>Children</span> Test 4
    </div>
    <p>Tree Traversal Children Test 5</p>
</body>
</html>

$("div").children() 는 DIV를 찾아서 그의 자식들에 대하여 css속성을 적용한 것이다.

위에 예에서 보면 "div" 자식인 "span"을 찾아 해당하는 문구에 밑줄을 보여줌을 알 수 있다.

 

[ .parent() ]

     $(document).ready(function () {
         var $spans = $('span');
         $( $spans ).parent().css('color','red');
     });

"span"태그가 적용된 곳의 부모 노드("div", "p")에 속성을 변경시켰음을 확인 할 수 있다.

 

[ .find ([selector]) ]

    <script type="text/javascript">
        $(document).ready(function () {
            var $spans = $('span');
            $("p").find( $spans ).css('color','red');

        });
    </script>

 

모든 span태그를 spans라고 정의하고 $("p").find( $spans )를 이용하여 p태그 하단의 span태그에 해당하는 내용에 스타일을 적용하여 준다.

find메소드와 filter 메소드의 차이

$(“div”).filter(“a”) : filter() 메서드를 사용할 경우는 div요소의 집합에서 “a”를 찾는다.
$(“div”).find(“a”) : find() 메서드를 사용할 경우 div 요소의 집합 내용에서 “a”의 요소를 가져온다.

$("p").find( $spans ).css('color','red'); 의 find 대신 filter를 적용하여 보면 아래와 같은 결과를 확인 할 수 있다.

 

[ .siblings() ]

<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; }
        .selected { background:red }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("li").each(function () {
                $(this).click(function () {
                    $(this).addClass("selected");
                    $(this).siblings().removeClass("selected");

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

"li"태그의 리스트 중 하나를 선택하면 $(this).addClass("selected"); 에 의하여 "li"태그가 적용된 모든 요소에 "class"가 "selected"로 적용이 되고 그 후 $(this).siblings().removeClass("selected");에 의해 선택한 요소를 제외한 모든 요소들의 "selected"가 제거가 된다. (아래 이미지 참조)

 

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

http://hyeonseok.com/soojung/contents/upload/jQueryBasicAPIs.pdf

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

jQuery Event - Mouse Events  (0) 2012.04.23
jQuery Event  (0) 2012.04.23
jQuery Traverse - Tree Traversal  (0) 2012.04.20
jQuery Traverse - Miscellaneous Traversing  (0) 2012.04.20
jQuery Traverse - Filtering  (0) 2012.04.19
jQuery Callback Functions  (0) 2012.04.19