Program Tip

첫 번째를 제외한 모든 하위 요소를 선택합니다.

programtip 2020. 10. 4. 13:09
반응형

첫 번째를 제외한 모든 하위 요소를 선택합니다.


다음이 있다고 가정합니다.

<ul>
 <li>First item</li>
 <li>Second item</li>
 <li>Third item</li>
</ul>

jQuery를 사용하여 첫 번째 요소 이후에 모든 하위 요소를 어떻게 선택합니까? 따라서 다음과 같은 결과를 얻을 수 있습니다.

<ul>
 <li>First item</li>
 <li class="something">Second item</li>
 <li class="something">Third item</li>
</ul>

"not"및 "first child"선택기를 사용할 수 있어야합니다.

$("li:not(:first-child)").addClass("something");

http://docs.jquery.com/Selectors/not

http://docs.jquery.com/Selectors/firstChild


여기에있는 네 가지 방법에 대한 완전히 비과학적인 분석을 바탕으로 볼 때 속도 차이가 많지 않은 것 같습니다. 다양한 길이의 정렬되지 않은 일련의 목록이 포함 된 페이지에서 각각을 실행하고 Firebug 프로파일 러를 사용하여 시간을 측정했습니다.

$("li").slice(1).addClass("something");

평균 시간 : 5.322ms

$("li:gt(0)").addClass("something");

평균 시간 : 5.590ms

$("li:not(:first-child)").addClass("something");

평균 시간 : 6.084ms

$("ul li+li").addClass("something");

평균 시간 : 7.831ms


http://docs.jquery.com/Traversing/slice

$("li").slice(1).addClass("something");

보다 우아한 쿼리 (li 요소가 앞에 오는 모든 li 요소 선택) :

$('ul li+li')


나는 사용할 것이다

$("li:gt(0)").addClass("something");

이것은 작동합니다

$('ul :not(:first-child)').addClass('something');

이것이 내가 지금까지 일한 것입니다.

$('.certificateList input:checkbox:gt(0)')

jQuery .not () 메서드 사용

$('li').not(':first').addClass('something');

또는

var firstElement = $('li').first();
$('li').not(firstElement).addClass('something');

참고 URL : https://stackoverflow.com/questions/178407/select-all-child-elements-except-the-first

반응형