jQuery closest() พร้อมตัวอย่าง

บทนำ

เมธอด closest() ใน jQuery ใช้คืนค่าโบราณ (ancestor) ตัวแรกขององค์ประกอบที่เลือก ซึ่งตรงตามตัวกรอง (selector) ที่ระบุ โดยจะค้นหาเริ่มจากองค์ประกอบปัจจุบันไปขึ้นเรื่อยๆ ตามต้นไม้ DOM

ไวยากรณ์ (Syntax)

$(selector).closest(filter)

ตัวอย่าง: การใช้งาน closest() กับรายการซ้อนกัน

<!DOCTYPE html>
<html>
<head>
    <style>
        .demo * {
            display: block;
            border: 2px solid blue;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("span").closest("ol").css({
                "background-color": "orange",
                "color": "black",
                "border": "3px dashed orange"
            });
        });
    </script>
</head>
<body class="demo">
    body
    <div style="width:600px;">
        <ol>ol
            <ol>ol
                <ol>ol
                    <li>li
                        <span>span</span>
                    </li>
                </ol>
            </ol>
        </ol>
    </div>
</body>
</html>

ผลลัพธ์

โค้ดจะค้นหา element <ol> ที่อยู่ใกล้ที่สุด (closest ancestor) ของ <span> และนำสไตล์ CSS ไปใช้กับ element <ol> นั้น ทำให้พื้นหลังสีส้ม ขอบจุดสีส้ม และตัวอักษรสีดำ

สรุป

เมธอด closest() ต่างจาก parents() ที่จะคืนค่าโบราณทั้งหมด ส่วน closest() จะคืนเพียงตัวแรกที่ตรงตามเงื่อนไข בלבד รวมถึง element ปัจจุบันด้วย หาก element ปัจจุบันตรงตามตัวกรองแล้ว จะคืน element นั้นเอง