jQuery에서 마지막 자식 요소를 선택하는 방법은 무엇입니까?

jQuery에서 마지막 자식 요소를 선택하는 방법은 무엇입니까?

그 후손이 아니라 막내 만.

다음과 같이 할 수도 있습니다.

<ul id="example">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
</ul>

// possibility 1
$('#example li:last').val();
// possibility 2
$('#example').children().last()
// possibility 3
$('#example li:last-child').val();

:마지막

.children (). last ()

:막내

성능 :

$('#example').children().last()

또는 위에서 언급 한 특정 클래스의 마지막 자녀를 원하는 경우.

$('#example').children('.test').last()

또는 특정 클래스가있는 특정 하위 요소

$('#example').children('li.test').last()

: last-child 선택기 를 사용하여 ?

도움이 필요한 특정 시나리오를 염두에두고 있습니까?

2019 년 ...

jQuery 3.4.0은 : first, : last, : eq, : even, : odd, : lt, : gt 및 : nth를 지원하지 않습니다. Sizzle을 제거 할 때 querySelectorAll을 둘러싼 작은 래퍼로 대체 할 것이며 더 큰 선택기 엔진없이 이러한 선택기를 다시 구현하는 것은 거의 불가능합니다.

우리는이 절충이 그만한 가치가 있다고 생각합니다. .first, .last 및 .eq와 같은 위치 지정 방법은 계속 지원할 것입니다. 위치 선택기로 수행 할 수있는 모든 작업은 대신 위치 방법으로 수행 할 수 있습니다. 어쨌든 그들은 더 잘 수행합니다.

https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/

이제를 사용해야합니다 .first()..last() 대신 (또는 jQuery 없음).

마지막 자식을 선택하고 요소 유형을 구체적으로 지정해야하는 경우 선택기를 사용할 수 있습니다. 마지막

다음은 예입니다.

$("div p:last-of-type").css("border", "3px solid red");
$("div span:last-of-type").css("border", "3px solid red");

<div id="example">
            <p>This is paragraph 1</p>
            <p>This is paragraph 2</p>
            <span>This is paragraph 3</span>
            <span>This is paragraph 4</span>
            <p>This is paragraph 5</p>
        </div>

위의 예에서 단락 5는 div의 "p"유형의 마지막 요소이고 단락 4는 div의 마지막 "범위"이므로 단락 4와 단락 5 모두 빨간색 테두리가 있습니다.

안녕하세요 모두이 속성을 시도하십시오

$( "p span" ).last().addClass( "highlight" );

감사