jQuery anak pertama dari "ini"

Saya mencoba meneruskan "ini" dari rentang yang diklik ke fungsi jQuery yang kemudian dapat mengeksekusi jQuery pada anak pertama elemen yang diklik itu. Tampaknya tidak bisa melakukannya dengan benar ...

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

Javascript:

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

Bagaimana cara merujuk: elemen pertama-anak?

Jika Anda ingin menerapkan pemilih ke konteks yang disediakan oleh set jQuery yang ada, coba fungsi find () :

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

Jørn Schou-Rode mencatat bahwa Anda mungkin hanya ingin menemukan turunan langsung pertama dari elemen konteks, karenanya pemilih anak (>). Dia juga menunjukkan bahwa Anda bisa menggunakan fungsi children () , yang sangat mirip dengan find () tetapi hanya mencari satu level di dalam hierarki (yang Anda butuhkan ...):

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

Gunakan childrenfungsi dengan :firstpemilih untuk mendapatkan anak pertama tunggal dari element:

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

Saya telah menambahkan tes jsperf untuk melihat perbedaan kecepatan untuk berbagai pendekatan untuk mendapatkan anak pertama (total 1000+ anak)

diberikan, notif = $('#foo')

Cara jQuery:

1. $(":first-child", notif) - 4.304 ops / dtk - tercepat
2. notif.children(":first") - 653 ops / detik - 85% lebih lambat
3. notif.children()[0] - 1.416 ops / detik - 67% lebih lambat

Cara asli:

4. JavaScript asli ' ele.firstChild- 4,934,323 ops / detik (semua pendekatan di atas 100% lebih lambat dibandingkan dengan firstChild)
5. Elemen DOM asli dari jQery: notif[0].firstChild- 4,913.658 ops / dtk

Jadi, 3 pendekatan jQuery pertama tidak dianjurkan, setidaknya untuk anak pertama (saya ragu itu akan menjadi masalah dengan banyak lainnya juga). Jika Anda memiliki objek jQuery dan perlu mendapatkan anak pertama, maka dapatkan elemen DOM asli dari objek jQuery, menggunakan referensi array [0] (disarankan) atau .get(0)dan gunakan ele.firstChild. Ini memberikan hasil yang sama identik dengan penggunaan JavaScript biasa.

semua tes dilakukan di Chrome Canary build v15.0.854.0

element.children().first();

Temukan semua anak dan dapatkan yang pertama dari mereka.

Sudahkah Anda mencoba

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

Saya pikir Anda ingin mengatur elemen Anda sebagai konteks untuk pencarian Anda. Mungkin ada cara yang lebih baik untuk melakukan ini dimana beberapa guru jQuery lain akan melompat ke sini dan membuang Anda :)

Saya baru saja menulis sebuah plugin yang menggunakan .firstElementChildjika memungkinkan, dan kembali ke iterasi setiap node individu jika perlu:

(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);

Ini tidak secepat solusi DOM murni, tetapi dalam uji jsperf di bawah Chrome 24 itu beberapa urutan besarnya lebih cepat daripada metode berbasis pemilih jQuery lainnya.

Anda bisa menggunakan DOM

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

Ini bisa dilakukan dengan sihir sederhana seperti ini:

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

Referensi: http://www.snoopcode.com/jquery/jquery-first-child-selector

tolong gunakan ini seperti hal pertama ini beri nama kelas untuk menandai p seperti "myp"

kemudian gunakan kode berikut

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

Jika Anda ingin anak pertama yang Anda butuhkan

    $(element).first();

Jika Anda ingin elemen pertama tertentu dalam dom dari elemen Anda, gunakan di bawah ini

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

coba: http://jsfiddle.net/vgGbc/2/