• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zamiana tekstu w każdym divie o danej klasie

VPS Starter Arubacloud
0 głosów
1,274 wizyt
pytanie zadane 19 marca 2016 w JavaScript przez Maciek Gamrot Bywalec (2,830 p.)
Chciał bym, aby każdy div o klasie (np. div_tekst) został sprawdzony, czy wewnątrz znajduje się dany tekst (np. %like%), a jeśli się znajduje to ma zostać podmieniony na inny tekst (np. Like). Nie mam zbytnio pomysłu jak odwoływać się do pojedynczego diva. Jak to zrobić?

2 odpowiedzi

+1 głos
odpowiedź 19 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 25 kwietnia 2016 przez Maciek Gamrot
 
Najlepsza

Stwórz zmienną, w której umieścisz wszystkie elementy o danej klasie - czyli document.getElementsByClassName('jakas-klasa');

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Następnie zrób pętle po tych elementach i sprawdzaj każdy element czy zawiera dany tekst - użyj do tego własności elementu innerHTML wraz z indexOf() albo regex

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Jeśli dany tekst się odnalazł w danym elemencie, to podmień go na własny tekst - również za pomocą własności innerHTML.

komentarz 19 marca 2016 przez Comandeer Guru (605,680 p.)

Prawdę mówiąc nie bardzo widzę sens używania document.getElementsByClassName podczas gdy mamy document.querySelectorAll.

komentarz 19 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Jeśli wiadomo, że szukamy elementów danej klasy, to document.getElementsByClassName będzie szybsze niż document.querySelectorAll

https://jsperf.com/getelementsbyclassname-vs-queryselectorall/18

Poza tym getElementsByClassName zwraca "żywą" listę elementów, czyli zmiana w danym elemencie DOM powinna zostać zastosowana w elemencie z tej zwróconej listy (w JavaScript) - w przeciwieństwie do querySelectorAll, który nie zwraca "żywej" listy elementów. A przynajmniej tak to rozumiem z opisu na MDN i np. stąd:

http://stackoverflow.com/a/30473180/4983840

Do różnic podanych na W3C nie mogłem się dokopać :(

 

1
komentarz 19 marca 2016 przez Comandeer Guru (605,680 p.)

Jeśli wiadomo, że szukamy elementów danej klasy, to document.getElementsByClassName będzie szybsze niż document.querySelectorAll

Ok, a tak szczerze: pisałeś aplikację na tyle dużą i zaawansowaną, że sposób pobierania elementów zrobił Ci różnicę? ;)

 Poza tym getElementsByClassName zwraca "żywą" listę elementów, czyli zmiana w danym elemencie DOM powinna zostać zastosowana w elemencie z tej zwróconej listy (w JavaScript) - w przeciwieństwie do querySelectorAll, który nie zwraca "żywej" listy elementów.

IMO właśnie największym problemem jest ta żywa kolekcja, reagująca na wszystkie zmiany w dokumencie. Wystarczy sobie wyobrazić sytuację, że będziemy dodawać od czasu do czasu w pętli kolejny element z daną klasą – i już mamy niekończącą się pętlę ;) Snapshoty stanu dokumentu to raczej to, czego się oczekuje.

Do różnic podanych na W3C nie mogłem się dokopać :( 

Różnice są definiowane w dwóch różnych specyfikacjach. document.querySelectorAll definiowane jest wewnątrz specyfikacji Selectors API, a document.getElementsByClassName wewnątrz specyfikacji DOM (i częściowo w specyfikacji HTML5).

Największym problemem z Selectors API nie jest szybkość, ale fakt, że selektory muszą być bezwzględne (czyli takie, jakie byłyby w arkuszu CSS) ;)

komentarz 19 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Ok, a tak szczerze: pisałeś aplikację na tyle dużą i zaawansowaną, że sposób pobierania elementów zrobił Ci różnicę? ;)

Nie, ale przecież pisząc kod, wypadałoby aby był szybki. Jeśli więc są jakieś dwie funkcje, które wykonują podobne rzeczy, to wybiera się szybszą (jeśli nie generuje jakichś niepożądanych "skutków ubocznych" w danej sytuacji). Dlatego, widząc że autor tematu chciał zmieniać elementy o danej klasie - zaproponowałem getElementsByClassName - bo jest bardziej specyficzne i szybsze.

IMO właśnie największym problemem jest ta żywa kolekcja, reagująca na wszystkie zmiany w dokumencie. Wystarczy sobie wyobrazić sytuację, że będziemy dodawać od czasu do czasu w pętli kolejny element z daną klasą – i już mamy niekończącą się pętlę ;) Snapshoty stanu dokumentu to raczej to, czego się oczekuje.

 Dobra, wygrałeś :) O tym nie wiedziałem.

komentarz 19 marca 2016 przez Comandeer Guru (605,680 p.)

Nie, ale przecież pisząc kod, wypadałoby aby był szybki. Jeśli więc są jakieś dwie funkcje, które wykonują podobne rzeczy, to wybiera się szybszą

Wybiera się tę, która jest łatwiejsza w utrzymaniu. Szybkość jest na drugim miejscu. IMO w większości aplikacji spieranie się między getElementsByClassName a querySelectorAll to kwestia całkowicie nieistotna. 

+1 głos
odpowiedź 19 marca 2016 przez Comandeer Guru (605,680 p.)

document.querySelectorAll zwróci Ci obiekt tablicopodobny, więc można go wykorzystać w pętli for czy for...of. Albo przepuścić przez Array.from i uzyskać normalną tablicę.

Podobne pytania

+1 głos
3 odpowiedzi 7,875 wizyt
pytanie zadane 23 czerwca 2016 w HTML i CSS przez Krzysztof Fidyka Początkujący (320 p.)
0 głosów
1 odpowiedź 3,395 wizyt
pytanie zadane 16 września 2016 w JavaScript przez Guardd Początkujący (350 p.)
0 głosów
1 odpowiedź 430 wizyt

93,078 zapytań

142,041 odpowiedzi

321,445 komentarzy

62,422 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...