Chapter 04. 노드 다루기 - 노드 생성/추가/삭제/이동. Lensson 02. 노드 이동

Chapter 04. 노드 다루기 - 노드 생성/추가/삭제/이동.

Lensson 02. 노드 이동

핵심 01 : 첫 번째 노드로 이동

핵심 02 : 마지막 번째 노드로 이동

핵심 03 : 특정 노드의 이전 노드로 이동

핵심 04 : 특정 노드의 다음 노드로 이동

핵심 01 : 첫 번째 노드로 이동

사용법

$부모노드.prepend($이동노드)

$이동노드.prependTo($부모노드)

예제 01. 클릭한 메뉴 아이템을 최상위 메뉴 아이템으로 이동해 주세요.

$(document).ready(function()
{    
    var $menu = $("ul.menu");
    
    $("ul.menu li").click(function()
    {
        $menu.prepend(this);
        $menu.prepend($(this));
        //prependTo로 바꾸어쓸경우
        $(this).prependTo(@menu);
    })
});
 

핵심 02 : 마지막 번째 노드로 이동

사용법

$부모노드.append($이동노드)

$이동노드.appendTo($부모노드)

예제 02. 클릭한 메뉴 아이템을 최하위 메뉴 아이템으로 이동해 주세요

$(document).ready(function()
{    
    var $menu = $("ul.menu");
    
    $("ul.menu li").click(function()
    {
        $menu.append(this);
        $menu.append($(this));
        //appendTo로 바꾸어쓸경우
        $(this).appendTo($menu);
    })
});
 

핵심 03 : 특정 노드의 이전 노드로 이동

$이동노드.insertBefore($기준노드)

$기준노드.before($이동노드)

예제 03. 실행화면처럼 클릭한 메뉴 아이템을 세 번째(menu3)의 이전 노드로 이동시켜 주세요

$(document).ready(function()
{    
    var $menu = $("ul.menu");
    
    $("ul.menu li").click(function()
    {
        if($(this).hasClass("select")==true)
        return;
 
        $(this).insertBefore(".select");
        //before로 바꾸어쓸경우
        $(".select").before($(this));
        $(".select").before(this);
    })
});

핵심 04 : 특정 노드의 다음 노드로 이동

사용법

$이동노드.insertAfter($기준노드)

$기준노드.after($이동노드)

예제 04. 실행화면처럼 클릭한 메뉴 아이템을 세 번째 메뉴(menu3)의 다음 노드로 이동시켜 주세요.

$(document).ready(function()
{    
    var $menu = $("ul.menu");
    
    $("ul.menu li").click(function()
    {
        if($(this).hasClass("select")==true)
        return;
 
        $(this).insertAfter(".select");
        //after로 바꾸어쓸경우
        $(".select").after($(this));
        $(".select").after(this);
    })
});