• 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

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
1,317 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 (606,240 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 (606,240 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 (606,240 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 (606,240 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,976 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,458 wizyt
pytanie zadane 16 września 2016 w JavaScript przez Guardd Początkujący (350 p.)
0 głosów
1 odpowiedź 466 wizyt

93,187 zapytań

142,201 odpowiedzi

322,012 komentarzy

62,514 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2127p. - dia-Chann
  2. 2092p. - Łukasz Piwowar
  3. 2079p. - Łukasz Eckert
  4. 2037p. - Tomasz Bielak
  5. 2006p. - Michal Drewniak
  6. 2006p. - rucin93
  7. 2005p. - Łukasz Siedlecki
  8. 1964p. - CC PL
  9. 1946p. - Adrian Wieprzkowicz
  10. 1901p. - Mikbac
  11. 1744p. - rafalszastok
  12. 1734p. - Anonim 3619784
  13. 1586p. - Dawid128
  14. 1520p. - Marcin Putra
  15. 1480p. - ssynowiec
Szczegóły i pełne wyniki

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 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...