[자기계발]/유튜브로 코딩배우기

[생활코딩] jQuery 탐색(traversing)이란?

슈총총 2021. 7. 4. 16:43
반응형

이번편에서는 하나의 chain context를 유지하며 제어의 대상이 되는 element를 변경해보는 방법을 알아보자. 이것을 탐색(traversing)라고 부른다


탐색(traversing)이란?

chain context를 유지하면서 제어의 대상이 되는 element를 변경하는 기법이다.

 

Traversing | jQuery API Documentation

Create a new jQuery object with elements added to the set of matched elements. Add the previous set of elements on the stack to the current set, optionally filtered by a selector. Add the previous set of elements on the stack to the current set. Get the ch

api.jquery.com

예제

<!-- http://opentutorials.org/example/jquery/example.traversing.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style>
            body{
                font-size:11px;
                width:1000px;
            }
            #panel div,#panel li,#panel ul{
                border:2px solid black;
                margin:10px;
                padding:10px;
            }
            #panel ul{
                list-style: none;
            }
            #panel .s{
                border:2px solid red;
                background-color: #808080;
            }
            #panel #root{
                margin-top:0;
            }
            textarea{
                width:982px;
                height:100px;
                font-size:11px;
                overflow: visible;
            }        
            #help{
                float:left;
                width:500px;
                height:450px;
                overflow-y: scroll;
                overflow-x: hidden
            }
            #panel{
                float:left;
                width:500px;
            }
            #help table{
                border:1px solid gray;
                border-collapse: collapse;
                width:100%;
            }
            #help table td{
                border:1px solid gray;
                padding:5px;
            }
            #help .title{
                color:white;
                background-color:#555;
                padding:3px;
            }
            #help .title.checked{
                background-color:red;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <p>
                javascript을 입력 한 후에 엔터를 눌러주세요.
                <textarea id="code"></textarea></p>
            <div id="help">
                <table>
                    <tr id="add"><td><div class="title">.add(selector)</div>엘리먼트를 추가한다</td></tr>
                    <tr id="andSelf"><td><div class="title">.andSelf()</div>현재 엘리먼트 셋에 이전 엘리먼트 셋을 더 한다</td></tr>
                    <tr id="children"><td><div class="title">.children([selector])</div>자식 엘리먼트를 선택한다</td></tr>
                    <tr id="closet"><td><div class="title">.closest(selector)</div>가장 가까운 selector 조상 엘리먼트를 탐색한다</td></tr>
                    <tr id="each"><td><div class="title">.each(function(index,Element))</div>현재 엘리먼트 셋에 반복 작업을 실행한다</td></tr>
                    <tr id="end"><td><div class="title">.end()</div>이전 체인 컨텍스트로 돌아간다.</td></tr>
                    <tr id="eq"><td><div class="title">.eq(index)</div>현재 엘리먼트 셋에서 index에 해당하는 엘리먼트를 선택한다</td></tr>
                    <tr id="filter"><td><div class="title">.filter(selector)</div>현재 엘리먼트 셋에서 selector에 해당하는 엘리먼트를 선택한다</td></tr>
                    <tr id="find"><td><div class="title">.find(selector)</div>현재 엘리먼트 셋에서 selector에 해당하는 자손 엘리먼트를 선택한다</td></tr>
                    <tr id="first"><td><div class="title">.first()</div>현재 엘리먼트 셋 중 첫번째 엘리먼트를 선택한다</td></tr>
                    <tr id="last"><td><div class="title">.last()</div>현재 엘리먼트 셋 중 마지막 엘리먼트를 선택한다</td></tr>
                    <tr id="next"><td><div class="title">.next()</div>각각의 엘리먼트에 대한 다음 형재 엘리먼트를 선택한다</td></tr>
                    <tr id="nextAll"><td><div class="title">.nextAll()</div>각각의 엘리먼트에 대한 다음 형재 엘리먼트 전부를 선택한다</td></tr>
                    <tr id="prev"><td><div class="title">.prev()</div>각각의 엘리먼트에 대한 이전 형재 엘리먼트를 선택한다</td></tr>
                    <tr id="prevAll"><td><div class="title">.prevAll()</div>각각의 엘리먼트에 대한 이전 형재 엘리먼트 전부를 선택한다</td></tr>
                    <tr id="siblings"><td><div class="title">.siblings()</div>각각의 엘리먼트에 대한 형재 엘리먼트 전부를 선택한다</td></tr>
                    <tr id="slice"><td><div class="title">.slice(start, [end])</div>현제의 엘리먼트 셋 중 start에서 end까지의 엘리먼트를 선택한다</td></tr>
                </table>
            </div>
            <div id="panel">
                <div id="root">
                    div#root
                    <div>
                        div
                    </div>
                    <div>
                        div
                        <ul>
                            ul
                            <li>li</li>
                            <li>li</li>
                            <li>li</li>
                            <li>li</li>
                        </ul>
                    </div>
                    <div>
                        div
                    </div>
                </div>    
            </div>
        </div>
        <script>
            var $wrapper = $('#root').addClass('selected');
            $('#code').keydown(function(e){
                if(e.keyCode == 13){
                    eval($(this).val());
                    return false;
                }
            }).change(function(){
                    eval($(this).val());
            });
            $('tr').click(function(){
                $(this).find('.title').toggleClass('checked');
            })
        </script>
    </body>
</html>
  • 바깥을 의미하며 id값이 root. div#root
  • 자기를 둘러싸고 있는 element가 어떤 element 인지 알 수 있다
  • 우리는 chain context 값을 변경 시키면서 element들의 색깔을 바꿔볼 것이다. wrapper 만들기 ↓
  • $('#root').addClasss('s').
    => id 값이 root인 element를 찾는 wrapper이다.
  • addClass를 하게 되면 #id값의 class 명으로 s가 추가가 된다.
  • s는 css에서 backgroundcolor를 gray색, border(테두리)를 red 정의 해놓은 css이다.
  • $('#root').addClasss('s').removeClasss('s')
    => 이렇게 함으로써 적용이 되어있던 s class 명을 삭제해줘야 한다. 아니면 빨간선이 잔류하게된다.
  • $('#root').addClasss('s').removeClasss('s').childern().addClass('s)
    => 자식 element가 선택이 된다. 
  • .childern().addClass('s).removeClasss('s').first().addClass('s')
    => 3개 element가 선택되어있었는데 first를 함으로써 첫 번째 element만 선택이 된다.
  • .first().addClass('s').removeClasss('s').next().addClass('s) 
    => 선택된 element의 다음으로 이동한다.
  • .next().addClass('s').removeClasss('s').next().addClass('s').prev().addClass('s)
    => 원래되로 되돌아 오고, prev를 함으로써 이전으로 또 돌아가는 것이다. ctrl + z 느낌
  • .prev().addClass('s').removeClasss('s').parents().addClass('s')
    =>부모 태그인 #root로 간다.
  • .parents().addClass('s').removeClass('s').find('li').addClass('s)
    => .find(selector)는 현재 element인 #root에서 (selector)로 전달된 자손 element를 선택한다. 우리는 인자로 li를 줬으니 그 element들이 선택될 것이다.
  • .find('li').addClass('s).removeClasss('s').first().addClass('s')
    =>first()는 선택된 element 중에 첫 번째 element를 선택하는 것. last는 반대이다.
  • .first().addClass('s').removeClasss('s').end().addClass('s')
    => end는 이전 chain context로 돌아가는 것이다.(ctrl + z)로 li element 들이 선택된다.
    => .end().addClass('s').removeClasss('s').end().addClass('s')를 하게되면 #root 맨 처음으로 돌아간다.
  • .end().addClass('s').removeClasss('s').children().addClass('s)
    => div#root의 자손들인 모든 div들이 선택된다.
  • .children().addClass('s).removeClasss('s').filter(':first').addClass('s')
    => filter는 현재 선택된 element 틀 안에서 selector에 해당되는 element를 반환하는 것이다.
    => find랑 비슷한데, filter는 선택된 element elector 안에서 가져오는 것이고 find는 현재 선택된 element 들이 각각 자식 element를 가지고 있을텐데 그 자식 element 안에서 가져오는 것이다.
    => 그래서 filter 보다 find가 더 범주가 큰 것이다.
  • .filter(':first').addClass('s').removeClasss('s').siblings().addClass('s')
    => siblings는 현재 선택된 element에 형제 element들로 return한다.
  • .siblings().addClass('s').removeClasss('s').parent().addClass('s').removeClasss('s').find().addClass('s').removeClasss('s').first().addClass('s').removeClasss('s').nextAll().addClass('s')
    => .nextAll()은 현재 선택된 형제 element 들 중에 나머지 것들을 다 return 하는 것이다.   
  • .nextAll().addClass('s').removeClasss('s').find('ul').addClass('s').removeClasss('s').add('li').addClass('s')
    => 현재 선택되어 있는 ul element에 인자로 전달된 li element 들이 추가가 된 것이다.
  • .add('li').addClass('s').closest('div').addClass('s')
    => 부모 조상 element 중에 그 selector로 전달하는 가장 가까운 조상 element를 return 하는 것이다 = div

여기까지 하나의 chain context를 유지하면서 그 안에서 선택된 element를 전환하는 방법을 알아보았다. 너무 단순하 것도 나쁘지만 동시에 복잡해 지는 것은 더 나쁘다. 적당한 단위로 context를 잘 끉어주는 것이 중요하며, 여러 api들은 사고를 유지하고, 로직의 일관성을 유지하는데 중요한 역할을 한다. 고로 어떤 것이 있는지 잘보고 필요할 때 마다 사용하자.


이전글 보고오기

반응형