ตัวอย่างเช่นมี 10 lis ในหนึ่ง ul และมีสไตล์พิเศษใน li ที่สาม (เช่นสีเป็นสีแดงและอื่น ๆ เป็นสีดำ) ฉันต้องการตั้งค่าสีของ LIS อื่น ๆ ทั้งหมด - ไม่รวม LIS สีแดง - เป็นสีแดง ในเวลานี้คุณต้องได้รับโหนดพี่ชายของ Red Lis ทั้งหมด
พี่น้องคือคนที่เหมือนกับคุณไม่เคยมีก่อนหน้าหรือต่อไปและอาจมี (พี่ชาย) แก่กว่าคุณหรืออายุน้อยกว่าคุณ ในทำนองเดียวกันมีการใช้โหนดพี่ชาย นี่คือวิธีปกติในการรับโหนดพี่ชาย
รหัสมีดังนี้
ฟังก์ชันพี่น้อง (elm) {var a = []; var p = elm.parentNode.children; สำหรับ (var i = 0, pl = p.length; i <pl; i ++) {ถ้า (p [i]! == elm) a.push (p [i]);แนวคิด: ก่อนอื่นให้ลูกทั้งหมดของโหนดหลักขององค์ประกอบนี้ เนื่องจากเด็กทุกคนรวมองค์ประกอบนี้เองคุณต้องลบตัวเองออกจากผลลัพธ์
มีวิธีอื่นที่ดูแปลก ๆ ซึ่งก็คือการได้รับซอร์สโค้ดของโหนดพี่ชายใน jQuery:
รหัสมีดังนี้
ฟังก์ชั่นพี่น้อง (elem) {var r = []; var n = elem.parentnode.firstchild; สำหรับ (; n; n = n.nextsibling) {ถ้า (n.nodetype === 1 && n! == elem) {r.push (n);IDEA: ก่อนอื่นค้นหาโหนดลูกแรกของโหนดพาเรนต์ขององค์ประกอบนี้จากนั้นวนลูปเพื่อค้นหาโหนดพี่ชายถัดไปของโหนดนี้จนกว่าการค้นหาจะเสร็จสมบูรณ์
ฉันสงสัยว่าทำไม jQuery ใช้วิธีนี้ วิธีนี้มีประสิทธิภาพมากกว่าวิธีแรกหรือไม่?
หลังจากการทดสอบเบื้องต้นของฉัน - มากกว่า 1,500 LI วิธีสองวิธีข้างต้นไม่มีความแตกต่างในประสิทธิภาพและพวกเขาทั้งสองประสบความสำเร็จภายในไม่กี่มิลลิวินาที สภาพแวดล้อมการทดสอบคือ Chrome และ Firefox
หากคุณต้องการรับโหนดพี่น้องทั้งหมดคุณสามารถใช้วิธีการใด ๆ ข้างต้น
แน่นอนฉันจะตรวจสอบสองวิธีข้างต้นในอนาคต หากมีความแตกต่างใด ๆ ฉันจะอัปเดต
วิธีการค้นหาผู้ปกครองลูกชายและพี่ชายของ JQuery
jQuery.parent (expr) ค้นหาโหนดหลักคุณสามารถส่งผ่าน expr สำหรับการกรองเช่น $ ("span"). parent () หรือ $ ("span"). parent (". class")
jQuery.parents (expr) คล้ายกับ jQuery.parents (expr) แต่มันค้นหาองค์ประกอบบรรพบุรุษทั้งหมดไม่ จำกัด เฉพาะองค์ประกอบของผู้ปกครอง
jQuery.children (expr) ส่งคืนโหนดเด็กทั้งหมด วิธีนี้จะส่งคืนโหนดเด็กโดยตรงเท่านั้นและจะไม่ส่งคืนโหนดลูกทั้งหมด
jQuery.contents () ส่งคืนเนื้อหาทั้งหมดต่อไปนี้รวมถึงโหนดและข้อความ ความแตกต่างระหว่างวิธีนี้กับเด็ก ๆ () คือรวมถึงข้อความที่ว่างเปล่าจะถูกใช้เป็นก
jQuery Object Returns, Children () จะส่งคืนโหนดเท่านั้น
jQuery.prev () ส่งคืนโหนดพี่น้องก่อนหน้าไม่ใช่โหนดพี่น้องทั้งหมด
jQuery.prevall () ส่งคืนโหนดพี่น้องก่อนหน้าทั้งหมดทั้งหมด
jQuery.next () ส่งคืนโหนดพี่น้องต่อไปไม่ใช่โหนดพี่น้องทั้งหมด
jQuery.nextall () ส่งคืนโหนดพี่น้องที่ตามมาทั้งหมด
jQuery.siblings () ส่งคืนโหนดพี่น้องโดยไม่คำนึงถึงด้านหน้าและด้านหลัง
jQuery.find (expr) แตกต่างอย่างสิ้นเชิงจาก jQuery.filter (expr) jQuery.filter () คือการกรองส่วนหนึ่งของคอลเลกชันวัตถุ jQuery เริ่มต้นในขณะที่ jQuery.find ()
ผลการส่งคืนจะไม่มีเนื้อหาในคอลเลกชันเริ่มต้นเช่น $ ("P"), ค้นหา ("span"), เริ่มมองหา <pan> จากองค์ประกอบ <p> ซึ่งเทียบเท่ากับ $ ("P Span")
บทความข้างต้น js เพื่อให้ได้โหนดพี่ชายขององค์ประกอบทั้งหมดเป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น