Elem szövegének módosítása jQuery-vel
Az előző leckékben megtanultuk, hogyan szerezhetünk
egy elemcskészletet jQuery-n keresztül, sőt láttunk
néhány példát a metódusok használatára is. Most
nézzük meg őket részletesebben. Ebben a leckében
megtanuljuk, hogyan változtathatjuk meg egy elem szövegét két
metódus segítségével: html és
text.
Oldjuk meg a következő feladatot: szerezzük meg az összes elemet
a www osztállyal, és egyszerre változtassuk meg
mindegyik szövegét '!!!'-ra. Tegyük fel, hogy a következő
HTML kódunk van:
<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>
Ekkor a JavaScript kód így fog kinézni:
let elems = document.getElementsByClassName('www');
for (let i = 0; i < elems.length; i++) {
elems[i].innerHTML = '!!!';
}
jQuery-vel sokkal egyszerűbb: megkapjuk
az összes elemet a dollár jel segítségével, így:
$('.www'), majd alkalmazzuk rájuk a
html metódust,
ami paraméterként fogadja az új
szöveget - $('.www').html('new text'). Ennyi! Ez a
sor elvégzi az összes munkát hurkok és
egyéb felesleges dolgok nélkül. Indítsd el a példát és győződj meg
róla magad:
$('.www').html('!!!');
Minden h3 elemnek a html metódussal
állítsd be a szövegét '!!!'-ra.