[Jquery] 선택자를 활용 - 스타일 변경2

제이쿼리를 활용하여 해당객체에 접근하는 방법에 대해 알아 보겠다. 아래 예제는 간단하게 원하는 객체를 찾아서 스타일을 변경하는 예제이다. 

Html

<ul id="selected_plays">         <li>컴퓨터             <ul>                 <li><a href="http://shopping.naver.com/spcategory/notebook.nhn">노트북</a></li>                 <li>넷북</li>                 <li>데스크탑</li>             </ul>         </li>         <li>의류             <ul>                 <li><a href="http://shopping.naver.com/category/category.nhn?cat_id=0200">남성의류</a></li>                 <li>여성의류</li>                 <li>아동복</li>                 <li>잡화</li>             </ul>         </li>         <li>전자제품             <ul>                 <li>주방용품                     <ul>                         <li>전자렌지</li>                         <li>전기밥솥</li>                     </ul>                 </li>                 <li><a href="http://shopping.naver.com/category/category.nhn?cat_id=0000">생활용품</a></li>                 <li>차량용품</li>             </ul>         </li>     </ul>

 위 HTML문서는 간단한 예제를 위한 내용이며, 위 문서를 눈으로 봐도 알수있듯이 중첩된 리스트에 수직으로 정렬이 되어 있음을 알 수 있을 것이다. 이를 수평정렬로 변경하려고 한다. 미리 작성한 마크업은 건드리지 않고 CSS와 제이쿼리를 이용해서 말이다.

Style(CSS)

.horizontal {       float:left;       list-style:none;       margin:10px; }

 

위 코드는 CSS코드이며, HTML문서 내용을 수평으로 만들어줄 코드이다.

 

Script

<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>     <script type="text/javascript">         $(document).ready(function () {             $('#selected_plays > li').addClass('horizontal');         });     </script>

 위는 코드는 제이쿼리를 이용해서 스타일을 입히는 코드이다. 위 코드를 간단히 설명하면 $()함수 안에 있는 선택자가 의미하는 것은 selected_plays를 ID값으로 가지는 요소의 자식(> - 자식 콤비네이터) 중에서 리스트 항목(li) 찾아서, “horizontal”스타일을 입히라는 것이다.

(아래 실행 모습참고)

 

[그림1 – 실행 보습]

 그럼 horizontal스타일이 적용이 안된 나머지 객체들에 다른 스타일을 입혀보도록 하자.

Script

$('#selected_plays li:not(.horizontal)').addClass('sub-level');

위 코드는 selected_plays ID를 가지고 있는 요소의 자식이며, horizontal 클래스를 가지고 있지 않은 항목(:not(.horizontal))를 찾아 해당 스타일 클래스를 적용하라는 내용이다.