본문 바로가기
└ Java Script

[jQuery] 같은 부모 아래 다른 자식 요소 찾기 / 형제자매 요소 select .siblings()

by 짜장이누나 2014. 10. 7.


특정 형재자매 요소 찾기 .siblings( ) 



 현재 위치에서 다른 형제자매 요소 select하기 위해서는 siblings() 라는 함수를 이용하면 된다.



>> 예제 소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul class="boardList">
    <li class="post1"><span>
        <span>첫번째 게시글</span>
        <span><a href="#" class="btnUp">위로 이동</span></a>
        <span><a href="#" class="btnDown">아래로 이동</span></a>
        <span><a href="#" class="btnDelete">삭제</span></a>
    </span></li>
    <li class="post2"><span>
        <span>두번째 게시글</span>
        <span><a href="#" class="btnUp">위로 이동</span></a>
        <span><a href="#" class="btnDown">아래로 이동</span></a>
        <span><a href="#" class="btnDelete">삭제</span></a>
    </span></li>
    <li class="post3"><span>
        <span>세번째 게시글</span>
        <span><a href="#" class="btnUp">위로 이동</span></a>
        <span><a href="#" class="btnDown">아래로 이동</span></a>
        <span><a href="#" class="btnDelete">삭제</span></a>
    </span></li>
</ul>
cs


>> 현재위치

$(.boardList .post2 .btnUp)

 





Q. 현재 두번째 게시글의 위로버튼 에 위치해 있을때 '두번째 게시글' 이라는 텍스트를 select 하는 방법은?


>> 해결방법

$(.boardList .post2 .btnUp).siblings('span').text() // 출력 : "두번째 게시글"


siblings() 함수를 통해 내가 찾고자하는 형제 태그를 찾은 후 텍스트를 구해야하므로 text()함수를 이용해 결과물을 얻는다.




요로코롬 형재자매님 다 모여라~~소풍