4.3 노드 찾기(자식 부모 형제)

자식노드

특정 노드의 바로 아래에 위치하고 있는 노드, 하위 노드의 하위노드는 자식 노드가 아닙니다.

 

<div id ="parent">

  <div id = "son">

    <div id = "grandchild">

    </div>

  </div>

  <div id ="daughter">

  </div>

</div>

 

"parent"의 노드 안에는 "son" "daughter" 가 있고 "son" 안에는 "grandchild" 가 있습니다. 이때 "parent"의 자식 노드는 "son" 과 "daughter" 가 됩니다.

 

- 모든 자식 노드 찾기

- 특정 자식 노드 찾기

- 첫번째 자식 노드 찾기

- 마지막 자식 노드 찾기

- n번째 자식 노드 찾기

 

모든 자식 노드 찾기

- $대상.children()

자식 노드 중 오직 태그 노드만을 찾아줍니다.

- $대상.contents()

모든 노드를 찾아줍니다.

///////////////////#samplePage의 자식 노드 변경//////////////////////////////////////

$(document).ready(functiont(){

  $("#samplePage").children().css("border","4px solid #f00");

  console.log($(#samplePage").children().length);

});

////////////////////////////////////////////////////////////////////////////////////////////

특정 자식 노드만 찾기

$대상.children("선택자")

////////////#samplePage의 하위노드중 test1클래스가 적용된 노드 변경///////////

$(document).ready(function(){

  $("#samplePage").children(".test1").css("border","4px solid #f00");
  console.log($("#samplePage").children(".test1").length);

});

////////////////////////////////////////////////////////////////////////////////////////////

첫번째 자식 노드 찾기

-$대상.children().first()

-$대상.children().eq(0)

-$대상.children(":first")

-$대상.children(":eq(0)")

////////////////////ul.menu의 자식 노드 중 첫번째 노드의 변경/////////////////////

$(document).ready(function(){

  var  $menu =$("ul.menu");

  $menu.children(":first").css("border","4px solid #f00");

});

/////////////////////////////////////////////////////////////////////////////////////////

마지막 번째 자식 노드 찾기

- $대상.children().last()

- $대상.children(":last")

- $대상.children().eq($대상.children().length-1)

- $대상.children(":eq"+($대상.children().length-1)+")");

- $대상.children.eq(-1)

- $대상.children(":eq(-1)");

///////////////////ul.menu의 자식 노드 중 마지막 노드의 변경////////////////////

$(document).ready(function(){

  var $menu =$("ul.menu");

  $menu.children(":last").css("border","4px solid #f00");

});

////////////////////////////////////////////////////////////////////////////////////////

n번째 자식 노드 찾기

- $대상.chidren().eq(index)

- $대상.children(":eq("+index+")");

////////////////ul.menu의 자식 노드 중에 두번째 노드////////////////////////////

$(document).ready(function(){

  var $menu = $("ul.menu");

  $menu.children(":eq(1)").css("border","4px solid #f00");

});

///////////////////////////////////////////////////////////////////////////////////////

부모 노드 찾기

$대상.parent()

///////////////////////////ul.menu 노드의 부모노드//////////////////////////////////////

$(document).ready(function(){

  var $menu = $("ul.menu");

  $menu.parent().css("border","4px solid #f00");

});

/////////////////////////////////////////////////////////////////////////////////////////////

조상 노드 찾기

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

///////////////////////////////////////////////////////////////////////////////////////////

$(document).ready(function(){

  var $menu = $("ul.menu");

  $menu.parents(".page").css("border","4px solid #f00");

});

 

형제 노드

같은 깊이에 있는 노드

맨 위에서 설명한 "son" 과 "daughter" 은 형제 노드가 됩니다.

 

이전 형제 노드 찾기

-$대상.prev()

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

/////////////////////////////////////////////////////////////////////////////////////////

$(document).ready(function(){

  var $select = $("ul.menu li.select");

  $select.prev().css("border","4px solid #f00");

});

 

다음 형제 노드 찾기

- $대상.next()

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