[jQuery] 형제 노드 찾기

2019.03.06 04:04

졸리운_곰 조회 수:286

[jQuery] 형제 노드 찾기   

 

형제 노드 찾기

 

형제 노드란?

같은 깊이에 있는 노드를 말한다.

 

1
2
3
4
5
6
7
8
9
10
<body>
    <ul class="menu">
        <li>menu1</li>
        <li>menu2</li>
        <li class="select">menu3</li>
        <li>menu4</li>
        <li>menu5</li>
        <li>menu6</li>
    </ul>
</body>
 cs

<li> 태그 노드는 모두 동일한 형제 노드

 

이전 형제 노드 찾기

특정 노드의 이전 형제 노드를 찾고 싶은 경우 prev()를 사용한다.

prev()를 연속 두번 호출하면 이전의 이전 형제 노드에 접근할 수 있다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

1
2
$대상.prev()
$대상.prevAll(["선택자"])
 cs

 

select 클래스가 적용된 노드의 바로 앞의 이전 노드를 찾아 border를 "4px solid #f00"를 적용

1
2
var $select = $("ul.menu li.select");
$select.prev().css("border","4px solid #f00");
 cs

 

마지막 노드(menu6)의 모든 이전 형제 노드를 찾아 border 속성을 "4px solid #f00"을 적용

1
2
var $select = $("ul.menu li:last");
$select.prevAll().css("border","4px solid #f00");
 cs

또는

1
$("ul.menu li").last().prevAll().css("border","4px solid #f00");
 cs

 

 

다음 형제 노드 찾기

1
2
$대상.next()
$대상.nextAll(["선택자"])
 cs

next() 메서드는 prev() 메서드와 반대되는 메서드로서 특정 노드의 바로 다음에 있는 형제 노드를 찾고 싶을 때 사용한다.

 
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
이 게시물을
목록
목록
쓰기
태그
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED