จะเลือกองค์ประกอบลูกสุดท้ายใน 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 selector ?

คุณมีสถานการณ์เฉพาะที่คุณต้องการความช่วยเหลือหรือไม่?

หากคุณต้องการเลือกลูกคนสุดท้ายและจำเป็นต้องระบุประเภทองค์ประกอบคุณสามารถใช้ตัวเลือกสุดท้ายของประเภท

นี่คือตัวอย่าง:

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

ในตัวอย่างข้างต้นทั้งวรรค 4 และวรรค 5 จะมีเส้นขอบสีแดงเนื่องจากวรรค 5 เป็นองค์ประกอบสุดท้ายของประเภท "p" ใน div และวรรค 4 คือ "ช่วง" สุดท้ายใน div

สำหรับปี 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)

สวัสดีทุกคนโปรดลองใช้คุณสมบัตินี้

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

ขอบคุณ