[jQuery]첫 번째 자식 요소 선택하기

 

첫 번째 자식 요소 찾기

$(선택자).children().first()
$(선택자).children().eq(0)
$(선택자).children(":first")
$(선택자).children(":eq(0)")

 

ul.list 자식 노드 중 첫 번째 자식 노드 border 변경

 

html

<ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

 

:first 선택자 이용

var $list = $("ul.list");
$list.children(":first").css("border","3px solid #f00");

first() 메서드 이용방법

var $list = $("ul.list");
$list.children().first().css("border","3px solid #f00");

 

 

결과는 같음

 

그렇다면 2개 중 좀 더 효율적인 방법은?

상황에 따라 다르지만 위의 경우만 놓고 따지면 선택자를 이용한 방법이 좀 더 효율적이다.
이유는? 메서드를 이용한 방식은 children() 메서드와 first()메서드를 2번 호출하지만 선택자를 이용한 경우에는 children() 메서드만 호출하기 때문이다.
이렇게 jQuery 코드를 최적하 할 경우에는 메서드 사용을 가급적 줄이는것이 좋다.

 

그렇다면 다 선택자로 사용하면 될까? 

물론 아니다 상황에 따라 다르다.

 

첫번째와 마지막 자식 노드 border 색 변경 할 경우

 

선택자를 이용할 경우

var $list = $("ul.list");
$list.children(":first").css("border","3px solid #f00");
$list.children(":last").css("border","3px solid #f00");

 

메서드를 이용할 경우

var $list = $("ul.list");
var $children = $list.children();
$children.first().css("border","3px solid #f00");
$children.last().css("border","3px solid #f00");

 

메서드를 이용해서 처리할 경우에는 선택자를 이용할 때 중복 호출했던 children() 메서드를 변수로 묶어서 한 번만 호출하면 되기 때문에 좀 더 효율적이다.