jQuery ลูกคนแรกของ“ นี่”

ฉันพยายามส่ง "สิ่งนี้" จากช่วงการคลิกไปยังฟังก์ชัน jQuery ที่สามารถเรียกใช้ jQuery กับลูกคนแรกขององค์ประกอบที่ถูกคลิกนั้นได้ ดูเหมือนจะไม่ถูกต้อง ...

<p onclick="toggleSection($(this));"><span class="redClass"></span></p>

javascript:

function toggleSection(element) {
  element.toggleClass("redClass");
}

ฉันจะอ้างอิงถึง: ลูกคนแรกขององค์ประกอบได้อย่างไร

หากคุณต้องการใช้ตัวเลือกกับบริบทที่กำหนดโดยชุด jQuery ที่มีอยู่ให้ลองใช้ฟังก์ชัน find () :

element.find(">:first-child").toggleClass("redClass");

Jørn Schou-Rode ตั้งข้อสังเกตว่าคุณอาจต้องการค้นหาผู้สืบทอดโดยตรงคนแรกขององค์ประกอบบริบทเท่านั้นดังนั้นตัวเลือกลูก (>) นอกจากนี้เขายังชี้ให้เห็นว่าคุณสามารถใช้ฟังก์ชัน children ()ซึ่งคล้ายกับ find () แต่ค้นหาได้ลึกเพียงระดับเดียวในลำดับชั้น (ซึ่งเป็นสิ่งที่คุณต้องการ ... ):

element.children(":first").toggleClass("redClass");

ใช้childrenฟังก์ชั่นที่มี:firstตัวเลือกเพื่อรับลูกคนแรกของelement:

element.children(":first").toggleClass("redClass");

ฉันได้เพิ่มการทดสอบjsperfเพื่อดูความแตกต่างความเร็วสำหรับวิธีการต่าง ๆ เพื่อรับลูกคนแรก (รวม 1,000+ เด็ก)

ได้รับ notif = $('#foo')

วิธี jQuery:

1. $(":first-child", notif) - 4,304 ops / วินาที - เร็วที่สุด
2. notif.children(":first") - 653 ops / วินาที - ช้าลง 85%
3. notif.children()[0] - 1,416 ops / วินาที - ช้าลง 67%

วิธีพื้นเมือง:

4. JavaScript ดั้งเดิม ' ele.firstChild- 4,934,323 ops / วินาที (วิธีการทั้งหมดข้างต้นช้ากว่า 100% เมื่อเทียบกับfirstChild)
5. Native DOM ele จาก jQery: notif[0].firstChild- 4,913,658 ops / วินาที

ดังนั้นไม่แนะนำ 3 jQuery วิธีแรกอย่างน้อยสำหรับลูกคนแรก (ฉันสงสัยว่าจะเป็นเช่นนี้กับคนอื่น ๆ ด้วย) หากคุณมีวัตถุ jQuery และความต้องการที่จะได้รับเป็นครั้งแรกที่เด็กแล้วได้รับองค์ประกอบ DOM พื้นเมืองจากวัตถุ jQuery ใช้อ้างอิงอาร์เรย์[0] (แนะนำ)หรือและใช้.get(0) ele.firstChildสิ่งนี้ให้ผลลัพธ์ที่เหมือนกันเหมือนกับการใช้งาน JavaScript ปกติ

การทดสอบทั้งหมดเสร็จสิ้นใน Chrome Canary build v15.0.854.0

element.children().first();

ค้นหาเด็กทุกคนและเป็นคนแรกของพวกเขา

คุณเคยลองไหม

$(":first-child", element).toggleClass("redClass");

ฉันคิดว่าคุณต้องการกำหนดองค์ประกอบของคุณเป็นบริบทสำหรับการค้นหาของคุณ อาจมีวิธีที่ดีกว่าในการทำสิ่งนี้ซึ่งปราชญ์ jQuery อื่น ๆ จะกระโดดเข้ามาที่นี่และโยนคุณออกไป :)

ฉันเพิ่งเขียนปลั๊กอินที่ใช้.firstElementChildถ้าเป็นไปได้และย้อนกลับไปทำซ้ำในแต่ละโหนดถ้าจำเป็น:

(function ($) {
    var useElementChild = ('firstElementChild' in document.createElement('div'));

    $.fn.firstChild = function () {
        return this.map(function() {
            if (useElementChild) {
                return this.firstElementChild;
            } else {
                var node = this.firstChild;
                while (node) {
                    if (node.type === 1) {
                        break;
                    }
                    node = node.nextSibling;
                }
                return node;
            }
        });
    };
})(jQuery);

มันไม่เร็วเท่าโซลูชัน DOM บริสุทธิ์ แต่ในการทดสอบ jsperfภายใต้ Chrome 24 มันเป็นคำสั่งที่มีขนาดเร็วกว่าวิธีการเลือก jQuery อื่น ๆ

คุณสามารถใช้ DOM

$(this).children().first()
// is equivalent to
$(this.firstChild)

สิ่งนี้สามารถทำได้ด้วยเวทมนตร์ที่เรียบง่ายเช่นนี้:

$(":first-child", element).toggleClass("redClass");

การอ้างอิง: http://www.snoopcode.com/jquery/jquery-first-child-selector

โปรดใช้มันเหมือนสิ่งแรกนี้ตั้งชื่อคลาสให้แท็ก p เช่น "myp"

จากนั้นใช้รหัสต่อไปนี้

$(document).ready(function() {
    $(".myp").click(function() {
        $(this).children(":first").toggleClass("classname"); // this will access the span.
    })
})

หากคุณต้องการลูกคนแรกทันทีที่คุณต้องการ

    $(element).first();

หากคุณต้องการองค์ประกอบแรกโดยเฉพาะจากองค์ประกอบของคุณให้ใช้ด้านล่าง

    var spanElement = $(elementId).find(".redClass :first");
    $(spanElement).addClass("yourClassHere");

ลองใช้: http://jsfiddle.net/vgGbc/2/