Próbuję uzyskać rozpiętość podrzędną, która ma klasę = 4. Oto przykładowy element:
<div id="test">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
</div>
Dostępne narzędzia to JS i YUI2. Mogę zrobić coś takiego:
doc = document.getElementById('test');
notes = doc.getElementsByClassName('four');
//or
doc = YAHOO.util.Dom.get('#test');
notes = doc.getElementsByClassName('four');
Te nie działają w IE. Pojawia się błąd, że obiekt (doc) nie obsługuje tej metody lub właściwości (getElementsByClassName). Wypróbowałem kilka przykładów implementacji getElementsByClassName w różnych przeglądarkach, ale nie mogłem ich uruchomić i nadal otrzymuję ten błąd.
Myślę, że to, czego potrzebuję, to getElementsByClassName w różnych przeglądarkach lub muszę użyć doc.getElementsByTagName ('span') i zapętlić, dopóki nie znajdę klasy 4. Nie jestem jednak pewien, jak to zrobić.
javascript
yui
spyderman4g63
źródło
źródło
querySelectorAll
jest obsługiwany przez IE 8+, podczas gdygetElementsByClassName
jest obsługiwany tylko przez IE 9+. Jeśli możesz upuścić IE 7, możesz bezpiecznie używaćquerySelectorAll('.4')
. Nawiasem mówiąc,4
to nieprawidłowa nazwa klasy.document.querySelectorAll
jest DOM i nie ma nic wspólnego z YUIOdpowiedzi:
Użyj
doc.childNodes
do iteracji po każdymspan
, a następnie odfiltruj ten, któregoclassName
równa się4
:Wcześniejsze
źródło
className
podobny sposób:if(doc.childNode[i].className.match("\s*" + search_class + "\s*")
gdzie zmiennasearch_class
jest nazwą klasy, której szukasz.Użyj querySelector i querySelectorAll
IE9 i nowsze
;)
źródło
Zaakceptowana odpowiedź dotyczy tylko najbliższych dzieci. Często szukamy potomków o tej nazwie klasy.
Czasami też chcemy, aby każde dziecko zawierało className.
Na przykład:
<div class="img square"></div>
powinno pasować do wyszukiwania w className „img”, mimo że dokładna nazwa klasy to nie „img”.Oto rozwiązanie obu tych problemów:
Znajdź pierwsze wystąpienie elementu podrzędnego z klasą
className
źródło
Użyj elementu.querySelector (). Załóżmy: „myElement” jest elementem nadrzędnym, który już masz. „sonClassName” to klasa dziecka, którego szukasz.
Aby uzyskać więcej informacji, odwiedź: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
źródło
let child = myElement.querySelector('sonClassName');
w moim przypadkuMożesz spróbować:
lub
źródło
Wydaje mi się, że chcesz czwartego przęsła. Jeśli tak, możesz to zrobić:
lub
Ta ostatnia zapewnia, że nie ma żadnych ukrytych węzłów, które mogłyby to zepsuć.
źródło
TagName
Otóż to! Tak prosty..firstChild
i.firstChildElement
chociażNależy jednak pamiętać, że stare przeglądarki nie obsługują
getElementsByClassName
.Wtedy możesz to zrobić
Wygląda na to, że działa, ale należy pamiętać, że klasa HTML
źródło
Użyj nazwy identyfikatora
getElementById
bez#
znaku przed nim. Następnie możesz pobraćspan
węzły potomne za pomocągetElementsByTagName
i zapętlić je, aby znaleźć ten z odpowiednią klasą:Demo: http://jsfiddle.net/Guffa/xB62U/
źródło
getElementsByTagName
Metoda działa w IE 8. Jest obsługiwana już od IE 5.5. developer.mozilla.org/en-US/docs/DOM/…Moim zdaniem za każdym razem, gdy możesz, powinieneś użyć Array i jego metod. Są dużo, dużo szybsze niż zapętlenie całego DOM / wrappera lub wypychanie rzeczy do pustej tablicy. Większość przedstawionych tutaj rozwiązań można nazwać Naive, jak opisano tutaj (przy okazji świetny artykuł):
https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc
Moje rozwiązanie : (podgląd na żywo na Codepen: https://codepen.io/Nikolaus91/pen/wEGEYe )
źródło
Sposób, w jaki zrobię to za pomocą jquery, wygląda mniej więcej tak.
źródło
Oto stosunkowo proste rozwiązanie rekurencyjne. Myślę, że wyszukiwanie wszerz jest tutaj odpowiednie. To zwróci pierwszy element pasujący do znalezionej klasy.
źródło
Możesz pobrać klasę nadrzędną, dodając poniższy wiersz. Gdybyś miał identyfikator, byłoby łatwiej z
getElementById
. Niemniej jednak,Następnie możesz użyć
querySelectorAll
na rodzicu,<div>
aby pobrać wszystkie pasującediv
pliki z klasą.progress__marker
querySelectorAll
pobierze każdydiv
z klasąprogress__marker
źródło
Nowoczesne rozwiązanie
dokumentacja
źródło
Aktualizacja ES6 z czerwca 2018 r
źródło
YUI2 ma implementację w różnych przeglądarkach
getElementsByClassName
.źródło
getElementsByClassName
jest metodąYAHOO.util.Dom
. W Twoim przypadku połączenie wyglądałoby mniej więcej takYAHOO.util.Dom.getElementsByClassName('four', 'span', 'test')
. Prawdopodobnie powinieneś przeczytać dokumentację, aby uzyskać bardziej szczegółowe informacje na temat tego, co robi ta rozmowa. Krótka wersja jest taka, że będzie teraz szukałspan
elementów z klasąfour
pod elementem DOM ztest
jakoid
.get
wywołania jest tylko element DOM. YUI nie przyjmuje podejścia polegającego na `` zawijaniu wszystkiego w obiekt specyficzny dla frameworka '', jak robi to coś takiego jak jQuery, ani nie naprawia natywnych obiektów, jak robi to Prototype (prawda? na zawsze). Pod tym względem YUI bardziej przypomina Dojo.Oto jak to zrobiłem za pomocą selektorów YUI. Dzięki sugestii Hanka Gay'a.
gdzie cztery = nazwa klasy, span = typ elementu / nazwa tagu, a test = identyfikator nadrzędny.
źródło
Skorzystaj
YAHOO.util.Dom.getElementsByClassName()
z tutaj .źródło