ตรวจสอบว่าบรรพบุรุษของคุณมีคลาสที่ใช้ jQuery หรือไม่

156

มีวิธีใดบ้างใน jQuery ในการตรวจสอบว่ามีผู้ปกครองผู้ปกครองผู้ยิ่งใหญ่ผู้ยิ่งใหญ่ที่มีชั้นเรียนหรือไม่

ฉันมีโครงสร้างมาร์กอัพที่ทำให้ฉันทำสิ่งนี้ในรหัส:

$(elem).parent().parent().parent().parent().hasClass('left')

อย่างไรก็ตามสำหรับการอ่านรหัสฉันต้องการหลีกเลี่ยงสิ่งนี้ มีวิธีที่จะพูดว่า "ผู้ปกครอง / ปู่ย่าตายาย / ปู่ย่าตายายใด ๆ มีชั้นนี้"?

ฉันใช้ jQuery 1.7.2

— crmpicco
แหล่งที่มา

stackoverflow.com/questions/16863917/… - ในกรณีที่บางคนต้องการที่จะทำโดยไม่ต้อง jQuery

— Robert Niestroj

คำตอบ:

304

if ($elem.parents('.left').length) {

}

— อเล็กซ์
แหล่งที่มา

ขอบคุณสิ่งที่ฉันต้องการ! สำหรับการบันทึกในขณะที่การฝึกฝนการปฏิบัติใน.lengthฐานะความจริงนั้นค่อนข้างอุดมสมบูรณ์ใน JS มันชัดเจนและเข้าใจง่ายกว่ามาก.length > 0

— dooleyo

นี่คือการเชื่อมโยงไป jQuery .parents ()เอกสาร

— H สุนัข

มีหลายวิธีในการกรองสำหรับบรรพบุรุษองค์ประกอบ

if ($elem.closest('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents().hasClass('parentClass')) {/*...*/}
if ($('.parentClass').has($elem).length /* > 0*/) {/*...*/}
if ($elem.is('.parentClass *')) {/*...*/}

ระวัง , closest() วิธีการรวมถึงองค์ประกอบของตัวเองในขณะที่การตรวจสอบการเลือก

อีกทางเลือกหนึ่งถ้าคุณมีตัวเลือกที่ตรงกับ$elemเช่น#myElemคุณสามารถใช้:

if ($('.parentClass:has(#myElem)').length /* > 0*/) {/*...*/}
if(document.querySelector('.parentClass #myElem')) {/*...*/}

หากคุณต้องการจับคู่องค์ประกอบโดยขึ้นอยู่กับคลาสของบรรพบุรุษเพื่อจุดประสงค์ในการใส่สไตล์เพียงใช้กฎ CSS :

.parentClass #myElem { /* CSS property set */ }

— A. Wolff
แหล่งที่มา

ฉันอาจกล้าพูด (โดยไม่ต้องทดสอบสิ่งนี้) ว่าวิธีนี้ดีกว่า Elem.parents จะทำการสำรวจ dom strucutre ทั้งหมดที่ใกล้ที่สุด () ควร (อาจ) หยุดเมื่อมันพบผู้ปกครองที่อยู่ใกล้ที่สุดกับองค์ประกอบนั้นและดังนั้นจึงมีประสิทธิภาพมากขึ้น นี่คือการเดาที่ไม่ได้รับการศึกษา ฉันมักจะใช้ที่ใกล้เคียงที่สุด () ดูเหมือนว่าฉันจะพบหัวข้อใหม่สำหรับการวิจัยสำหรับบล็อกของฉัน! : P

— dudewad

@dewewad ใช่มันเป็น แต่มันค่อนข้างล่าสุด ฉันหมายถึงในรุ่น jq ที่เก่ากว่า AFAIK นี่ไม่ใช่กรณี การวนลูปของผู้ปกครองไม่ได้หยุดอยู่บนพาเรนต์แรกที่จับคู่โดยใช้ที่ใกล้เคียงที่สุด () แต่ตอนนี้มันเป็น (ไม่ทราบว่าเป็นรุ่น jq ใด แต่ฉันค่อนข้างแน่ใจว่าถูกต้องในคำสั่งนี้)

— A. Wolff

เป็นการดีที่จะรู้ขอบคุณสำหรับข้อมูล แปลกที่พวกเขาจะไม่ได้หยุดพักจากรุ่นแรก

— dudewad

เมื่อไม่มีผู้ปกครองพบผู้ปกครอง () จะเร็วกว่าใกล้ที่สุด () jsperf.com/closest-vs-parents-foobar

— อเล็กซ์

@Alex ค่อนข้างสงบแน่นอนแน่นอนขอบคุณสำหรับการป้อนข้อมูล! BTW อีกครั้งอ่านคำถามIs there any way in jQuery to check if any parent,..., closest()การตรวจสอบองค์ประกอบของตัวเองดังนั้นนี้ไม่ได้จริงๆตอบคำถาม, OP อาจต้องการที่จะ explecitely ยกเว้นองค์ประกอบตัวเองเพื่อให้ยาคำตอบคือการใช้.parents()

— เอลวูลฟ์

คุณสามารถใช้parentsวิธีการที่มี.classตัวเลือกที่ระบุและตรวจสอบว่ามีวิธีการใดตรงกับ:

if ($elem.parents('.left').length != 0) {
    //someone has this class
}

— Igor Dymov
แหล่งที่มา