jQuery pierwsze dziecko „tego”

Próbuję przekazać „to” z zakresu kliknięcia do funkcji jQuery, która może następnie wykonać jQuery na pierwszym elemencie potomnym tego klikniętego elementu. Wydaje się, że nie mogę tego zrobić poprawnie ...

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

JavaScript:

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

Jak odwołać się do: first-child elementu?

Jeśli chcesz zastosować selektor do kontekstu dostarczonego przez istniejący zestaw jQuery, spróbuj funkcji find () :

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

Jørn Schou-Rode zauważył, że prawdopodobnie chcesz tylko znaleźć pierwszego bezpośredniego potomka elementu kontekstu, stąd selektor potomny (>). Wskazuje również, że równie dobrze możesz użyć funkcji children () , która jest bardzo podobna do find (), ale przeszukuje tylko jeden poziom głęboko w hierarchii (co jest wszystkim, czego potrzebujesz ...):

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

Użyj childrenfunkcji z :firstselektora , aby uzyskać jednolity pierwsze dziecko element:

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

Dodałem jsperf test, aby zobaczyć różnicę prędkości na różne sposoby, aby uzyskać pierwsze dziecko (w sumie ponad 1000 dzieci)

dany, notif = $('#foo')

jQuery sposoby:

1. $(":first-child", notif) - 4 304 operacji / s - najszybciej
2. notif.children(":first") - 653 operacji / s - 85% wolniej
3. notif.children()[0] - 1416 operacji / s - 67% wolniej

Rodzime sposoby:

4. JavaScript native ” ele.firstChild- 4 934 323 operacji / s (wszystkie powyższe podejścia są o 100% wolniejsze w porównaniu do firstChild)
5. Natywne elementy DOM z jQery: notif[0].firstChild- 4913658 operacji / sek

Tak więc pierwsze 3 podejścia jQuery nie są zalecane, przynajmniej dla pierwszego dziecka (wątpię, by tak było w przypadku wielu innych). Jeśli masz obiekt jQuery i potrzebujesz pierwszego dziecka, pobierz natywny element DOM z obiektu jQuery, korzystając z odwołania do tablicy [0] (zalecane) lub .get(0)użyj ele.firstChild. Daje to takie same wyniki jak w zwykłym użyciu JavaScript.

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

element.children().first();

Znajdź wszystkie dzieci i zdobądź je pierwsze.

Czy próbowałeś

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

Myślę, że chcesz ustawić swój element jako kontekst wyszukiwania. Może istnieć lepszy sposób na zrobienie tego, który wskoczy tu inny guru jQuery i rzuci na ciebie :)

Właśnie napisałem wtyczkę, która używa, .firstElementChildjeśli to możliwe, i w razie potrzeby wraca do iteracji po każdym węźle:

(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ł on o kilka rzędów wielkości szybszy niż jakakolwiek inna metoda oparta na selektorze jQuery.

możesz użyć DOM

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

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

użyj go w ten sposób, aby najpierw nadać nazwę klasie, aby oznaczyć p, np. „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.
    })
})

Jeśli chcesz natychmiastowe pierwsze dziecko, potrzebujesz

    $(element).first();

Jeśli chcesz konkretnego pierwszego elementu w domie od swojego elementu, użyj go poniżej

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

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