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?
jQuery(document).ready(...)
?Odpowiedzi:
Jeśli chcesz zastosować selektor do kontekstu dostarczonego przez istniejący zestaw jQuery, spróbuj funkcji find () :
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 ...):
źródło
find()
przeszukuje wszystkich potomków i:first-child
mogę dopasować jeden element na rodzica. Dlatego zapytanie może zwrócić kilka elementów. Czy się mylę?element.children(":first-child")
lubelement.children().first();
Użyj
children
funkcji z:first
selektora , aby uzyskać jednolity pierwsze dzieckoelement
:źródło
TypeError: Object [object HTMLAnchorElement] has no method 'toggleClass'
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:
$(":first-child", notif)
- 4 304 operacji / s - najszybciejnotif.children(":first")
- 653 operacji / s - 85% wolniejnotif.children()[0]
- 1416 operacji / s - 67% wolniejRodzime sposoby:
ele.firstChild
- 4 934 323 operacji / s (wszystkie powyższe podejścia są o 100% wolniejsze w porównaniu dofirstChild
)notif[0].firstChild
- 4913658 operacji / sekTak 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żyjele.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
źródło
firstChild
nie da takich samych wyników jakchildren()
zapytania jQuery lub selektora.firstChild
będzie zawierać węzły tekstowe, które są rzadko pożądane. jQuerycontents()
funkcja będzie włączyć je, alechildren()
nie będzie. Nowsze przeglądarki obsługująfirstElementChild
pierwszy element potomny, ale IE <9 go nie obsługuje. Tak więc, jeśli używaszfirstChild
, musisz ręcznie znaleźć pierwsze potomne węzły nietekstowe.$(":first-child", notif)
powinno być$(":first", notif)
dla oczekiwanego zachowania. Pierwszy zwróci wszystkich potomków pierworodnych.Znajdź wszystkie dzieci i zdobądź je pierwsze.
źródło
.children(':first')
.Czy próbowałeś
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 :)
źródło
element
maWłaśnie napisałem wtyczkę, która używa,
.firstElementChild
jeśli to możliwe, i w razie potrzeby wraca do iteracji po każdym węźle: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.
źródło
document.body
nie został jeszcze zainicjowany, 2) Wydajność jest tylko znacznie lepsza niż alternatywy, jeśli liczba węzłów potomnych jest bardzo wysoka. Tylko dla kilku dzieci (powiedzmy mniej niż 10)$('>:first-child',context)
jest to trochę szybsze. Tylko liczba dzieci wpływa na wydajność, a nie głębokość.document.body
- przyjrzę się temu.możesz użyć DOM
źródło
Można to zrobić za pomocą prostej magii, takiej jak ta:
Odniesienie: http://www.snoopcode.com/jquery/jquery-first-child-selector
źródło
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
źródło
Jeśli chcesz natychmiastowe pierwsze dziecko, potrzebujesz
Jeśli chcesz konkretnego pierwszego elementu w domie od swojego elementu, użyj go poniżej
wypróbuj: http://jsfiddle.net/vgGbc/2/
źródło
element
jest to węzeł DOM, to$(element).first()
jest on równoważny$(element)
, a nie jego pierwszemu potomkowi.