jQuery pierwsze dziecko "tego"

Użyj children function with the :first selektor {[6] } aby uzyskać pojedynczy pierwsze dziecko element:

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

Dodałem jsperf test, aby zobaczyć różnicę prędkości dla różnych podejść, aby uzyskać pierwsze dziecko (łącznie 1000+ dzieci)

notif = $('#foo')

sposoby jQuery:

1. $(":first-child", notif) - 4304 ops/sek-najszybszy
2. notif.children(":first") - 653 ops/sek - 85% wolniej
3. notif.children()[0] - 1416 ops/sek - 67% wolniej

natywne sposoby:

1. JavaScript native' ele.firstChild - 4,934,323 ops / sec (wszystkie powyższe podejście jest o 100% wolniejsze w porównaniu do firstChild)
2. rodzimy DOM ele z jQery: notif[0].firstChild - 4,913,658 ops / sec

Tak więc, pierwsze 3 podejścia jQuery nie są zalecane, przynajmniej dla first-child(wątpię, że byłoby tak w przypadku wielu innych). Jeśli masz obiekt jQuery i chcesz uzyskać first-child, to uzyskaj natywny element DOM z obiektu jQuery, używając odniesienia do tablicy[0] (zalecane) lub .get(0) i użyj ele.firstChild. To daje takie same wyniki jak zwykłe użycie JavaScript.

wszystkie testy są wykonywane w Chrome Canary build v15.0.854.0

element.children().first();

Czy próbowałeś

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

Myślę, że chcesz ustawić swój element jako kontekst dla wyszukiwania. Może być lepszy sposób, aby to zrobić, który jakiś inny guru jQuery wskoczy tutaj i wyrzuci na ciebie:)

Właśnie napisałem wtyczkę, która używa .firstElementChild jeśli to możliwe, i wraca do iteracji nad każdym pojedynczym węzłem, jeśli to konieczne:

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

Nie jest tak szybki jak czyste rozwiązanie DOM, ale w testach jsperf pod Chrome 24 było kilka rzędów wielkości szybciej niż jakakolwiek inna metoda oparta na selektorze jQuery.

Możesz użyć DOM

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

Proszę używać go w ten sposób po pierwsze, podaj nazwę klasy do tagu p jak " myp "

Następnie użyj następującego kodu

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

Można to zrobić za pomocą prostej magii takiej jak Ta:

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

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

Jeśli chcesz mieć natychmiastowe pierwsze dziecko, potrzebujesz

    $(element).first();

Jeśli chcesz mieć określony pierwszy element w dom z twojego elementu, użyj poniżej

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

Wypróbuj: http://jsfiddle.net/vgGbc/2/