Chapter 03. 노드 다루기 - 노드 찾기. Lesson 05. 형제 노드 찾기

Chapter 03. 노드 다루기 - 노드 찾기.

Lesson 05. 형제 노드 찾기

핵심 01: 이전 형제 노드 찾기

핵심 02: 다음 형제 노드 찾기

핵심 01: 이전 형제 노드 찾기

사용법 : 

$대상.prev()

$대상.prevAll(["선택자"])

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

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

예제 01. 실행화면처럼 메뉴 항목에서 select 클래스가 적용된 노드의 바로 앞의 이전 노드(menu2)를 찾아 border 속성을 "4px solid #f00"으로 변경해 주세요.

$(document).ready(function() 
{
    var $select = $("ul.menu li.select");
    $select.prev().css("border", "4px solid #f00");
});

예제 02. 실행화면 처럼 마지막 노드(menu6)의 모든 이전 형제 노드를 찾아 border 속성을 "4px solid #f00"으로 변경해 주세요.

$(document).ready(function() 
{
    var $last = $("ul.menu li:last");
    $last.prevAll().css("border", "4px solid #f00");
});

$(document).ready(function() 
{
    var $select = $("ul.menu li:select");
    $select.next().css("border", "4px solid #f00");
});

예제 04. 실행화면에서 첫 번째 노드(menu1)를 기준으로 다음에 등장하는 모든 형제 노드를 찾아 border 속성을 "4px solid #f00"으로 변경해 주세요.

$(document).ready(function() 
{
    var $select = $("ul.menu li:first");
    $select.nextAll().css("border", "4px solid #f00");
});