JQuery'de son alt öğe nasıl seçilir?

JQuery'de son alt öğe nasıl seçilir?

Sadece son çocuk, onun torunları değil.

Bunu da yapabilirsiniz:

<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();

:son

.children (). last ()

: son-çocuk

Performans için:

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

veya yukarıda belirtildiği gibi belirli bir sınıfa sahip son bir çocuk istiyorsanız.

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

veya belirli bir sınıfa sahip belirli bir alt öğe

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

: Last-child seçiciyi kullanarak ?

Yardıma ihtiyaç duyduğunuz belirli bir senaryo var mı?

Son çocuğu seçmek istiyorsanız ve öğe türüne özgü olmanız gerekiyorsa, türünün sonuncusunu seçiciyi kullanabilirsiniz.

İşte bir örnek:

$("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>

Yukarıdaki örnekte hem Paragraf 4 hem de Paragraf 5 kırmızı bir kenarlığa sahip olacaktır çünkü Paragraf 5 div'deki "p" türünün son öğesi ve Paragraf 4 div'deki son "aralık" tır.

2019 için ...

jQuery 3.4.0 kullanımdan kaldırılıyor: ilk,: son,: eq,: çift,: tek,: lt,: gt ve: nth. Sizzle'ı kaldırdığımızda, onu querySelectorAll etrafındaki küçük bir sarmalayıcıyla değiştireceğiz ve bu seçicileri daha büyük bir seçici motor olmadan yeniden uygulamak neredeyse imkansız.

Bu değiş tokuşun buna değer olduğunu düşünüyoruz. Yine de .first, .last ve .eq gibi konumlandırma yöntemlerini destekleyeceğimizi unutmayın. Konumsal seçicilerle yapabileceğiniz her şeyi, bunun yerine konumlandırma yöntemleriyle de yapabilirsiniz. Zaten daha iyi performans gösteriyorlar.

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

Eğer olmalıdır Yani şimdi kullanıyor .first(), .last()bunun yerine (veya hiç jQuery).

Herkese merhaba Lütfen bu özelliği deneyin

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

Teşekkürler