Jquery 자식, 형제 노드 찾기

Jquery 자식, 형제 찾기

첫번째, 마지막 노드 가져오기

// 요소의 첫번째, 마지막 item 가져오기
console.log($('li:first').text());
console.log($('li:last').text());
console.log($('.test:first').text());
console.log($('.test:last').text());

자신을 제외한 형제노드 반환

$('li.selectItem').siblings();
$('li#selectId').siblings();

자식노드 찾기(>)

$('ul>.selectItem').text('하이하이');

자식노드 찾기(find)

$(".test:eq(0)").find('div').text('찾았다!');

자식노드 찾기(children)

$(".test1").children('div').text('찾았다!');

부모찾기(closest)

현재 위치에서 위로 타고 올라감. 처음만난 노드를 반환함.
$(".thisDiv").closest('div').text('찾았다!')

부모찾기(parent)

자신의 직속부모만 찾을 수 있음
$(".test1").parent('div').css("background-color", "#aabbcc");

자신의 이전, 다음 노드 찾기

$(".test:eq(1)").prev().text('next에요!');
$(".test:eq(1)").next().text('next에요!');

<ul>
<li>a</li>
<li>b</li>
<li class="selectItem">c</li>
<li>d</li>
<li>e</li>
</ul>
<div class="test">
<div class="test1">
    <div class='thisDiv'>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
    1
</div>
</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>