jQuery “this” in ilk çocuğu

"Bu" tıklatılan bir span daha sonra o tıklatılan öğenin ilk alt jQuery yürütmek için bir jQuery işlevine geçmeye çalışıyorum. Doğru gibi görünmüyor ...

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

JavaScript:

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

Öğenin ilk alt öğesine nasıl başvurabilirim?

Varolan bir jQuery kümesi tarafından sağlanan bağlama bir seçici uygulamak isterseniz, find () işlevini deneyin :

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

Jørn Schou-Rode muhtemelen bağlam öğesinin ilk doğrudan torununu , dolayısıyla çocuk seçiciyi (>) bulmak istediğinizi belirtti . Ayrıca find () işlevine çok benzeyen children () işlevini de kullanabileceğinizi belirtiyor , ancak hiyerarşide yalnızca bir seviye derinlikte arama yapıyor (ihtiyacınız olan tek şey bu ...):

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

Tek bir ilk çocuğu elde etmek için seçici ile childrenişlevi kullanın ::firstelement

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

İlk çocuğu almak için farklı yaklaşımların hız farkını görmek için jsperf testi ekledim (toplam 1000+ çocuk)

göz önüne alındığında, notif = $('#foo')

jQuery yolları:

1. $(":first-child", notif) - 4.304 ops / sn - en hızlı
2. notif.children(":first") - 653 ops / sn -% 85 daha yavaş
3. notif.children()[0] - 1.416 ops / sn -% 67 daha yavaş

Yerel yollar:

4. JavaScript yerel ' ele.firstChild- 4.934.323 ops / sn (yukarıdaki tüm yaklaşımlara kıyasla% 100 daha yavaş firstChild)
5. JQery'den yerel DOM ele: notif[0].firstChild- 4.913.658 ops / sn

Bu nedenle, en azından ilk çocuk için ilk 3 jQuery yaklaşımı önerilmemektedir (başka birçok durumda da böyle olacağını sanmıyorum). Eğer ilk çocuğu almak için bir jQuery nesnesi ve ihtiyaç varsa, o yerli DOM öğesi almak dizisi referans kullanarak, jQuery nesneden [0] (önerilir) veya .get(0)ve kullanımı ele.firstChild. Bu, normal JavaScript kullanımıyla aynı sonuçları verir.

tüm testler Chrome Canary sürüm v15.0.854.0'da yapılır

element.children().first();

Tüm çocukları bul ve ilk önce onları al.

Denedin mi

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

Öğenizi aramanız için bir bağlam olarak ayarlamak istediğinizi düşünüyorum. Başka bir jQuery guru'nun buraya atlayıp size atması için bunu yapmanın daha iyi bir yolu olabilir :)

Sadece .firstElementChildmümkünse kullanan bir eklenti yazdım ve gerekirse her bir düğüm üzerinde tekrarlamaya düştüm :

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

Saf bir DOM çözümü kadar hızlı değil, ancak Chrome 24 altındaki jsperf testlerinde , diğer herhangi bir jQuery seçici tabanlı yöntemden daha hızlı birkaç büyüklük siparişiydi.

DOM'u kullanabilirsiniz

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

Bu, böyle basit bir büyü ile yapılabilir:

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

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

lütfen bu ilk şey gibi kullanın p "myp" gibi etiketlemek için bir sınıf adı verin

sonra aşağıdaki kodu kullanın

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

Hemen ilk çocuğu istiyorsanız, ihtiyacınız olan

    $(element).first();

Dom'da öğenizden belirli bir ilk öğe istiyorsanız, aşağıda kullanın

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

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