Zmena textu elementu pomocou jQuery
V predchádzajúcich lekciách sme sa naučili získať
skupinu elementov pomocou jQuery a dokonca sme videli
niektoré príklady práce s metódami. Teraz
sa s nimi zoznámime podrobnejšie. V tejto lekcii
sa naučíme meniť text elementu pomocou dvoch
metód: html a
text.
Vyriešme nasledujúcu úlohu: získajme všetky elementy
s triedou www a súčasne zmeňme
všetkým text na '!!!'. Nech máme
nasledujúci HTML kód:
<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>
Potom JavaScript kód bude vyzerať nasledovne:
let elems = document.getElementsByClassName('www');
for (let i = 0; i < elems.length; i++) {
elems[i].innerHTML = '!!!';
}
Pomocou jQuery to bude oveľa jednoduchšie: získame
všetky elementy pomocou dolára, takto:
$('.www'), a potom na ne aplikujeme metódu
html,
ktorá parametrom prijíma nový
text - $('.www').html('new text'). Hotovo! Tento
riadok vykoná všetku prácu bez akýchkoľvek cyklov a
iných hlúpostí. Spustite príklad a presvedčte sa
sami:
$('.www').html('!!!');
Všetkým h3 pomocou metódy html
nastavte text '!!!'.