each () Lekérdezett elemcsoporthoz tartozó, minden illeszkedő elemen, lefuttat egy meghatározott függvényt.
|
Kiértékelés: <span id="sp01"> </span>
<p> 0. p elem. <span> span elem. </span></p> <div>
<p> 1. p elem </p> <p> 2. p elem </p> </div><div>
<p> 3. p elem </p> </div><div>
<p> 4. p elem. A return false meghatározással, leállíthatjuk az akciót. </p> <p> 5. p elem </p> <p> 6. p elem </p> </div><p> 7. p elem </p> <p> 8. p elem </p> |
<head> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script> <script> $(document).ready(function(){ // ----------------------------------------------------------------------------------------------------- $("#each_tatalom").click(function(){ $("li").each(function(){ $(this).css({"color": "black", "border": "3px solid red", "background-color": "orange"}); var elem = $(this).html(); var kiiratas = ("Lekérdezett elem tartalma = "+ elem +" <br />") $("#sp01").append(kiiratas); }); }); // ----------------- Tömb formátumban -------------------------------------- var x=0; var each_tomb = new Array; $("#each_tomb").click(function(){ $("li").each(function(){ var elem = $(this).html(); each_tomb[x]=elem; x++; }); var hossz = each_tomb.length; for(i=0; i<hossz; i++){ var kiir = ("Tömb tartalma: "+i+" = "+ each_tomb[i] +" <br />") $("#sp01").append(kiir); } }); // ----------------------------------------------------------------------------------------------------- $("#each_alertli").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); // ----------------------------------------------------------------------------------------------------- $("#each_alertstop").click(function(){ $("li").each(function(){ alert($(this).text()); return false; }); }); // ----------------------------------------------------------------------------------------------------- $("#each_ujtatalom").click(function(){ $("li").each(function(){ var uj_tartalom = ("Ez lett a li elem, új tartalma.") $(this).html(uj_tartalom); }); }); // ----------------------------------------------------------------------------------------------------- $("#each_index").click(function(){ $("li").each(function(){ var elemindex = $(this).index(); var kiiratas = (" Lekérdezett elem index értéke = " + elemindex +"<br />") $("#sp01").append(kiiratas); }); }); // ----------------------------------------------------------------------------------------------------- $("#each_ulli").click(function(){ $("ul > li").each( function(){ alert($(this).text()) }); }); // ----------------------------------------------------------------------------------------------------- $("#each_alertp").click(function(){ $("p").each(function(){ alert($(this).text()) }); }); // ----------------------------------------------------------------------------------------------------- var i=0; $("#each_alertpstop").click(function(){ $("p").each(function(){ i++; alert($(this).text()) if(i>2){return false;} }); }); }); </script> </head> <body> <p> 0. p elem. <span> span elem. </span></p> <div> <ul> <li> 1. li elem. Fekete kávé. (index 0) </li> <li> 2. li elem. Kecske tej. (index 1) </li> </ul> <p> 1. p elem </p> <p> 2. p elem </p> </div> <div> <ol> <li> 3. li elem. Kávé. (index 0) </li> <li> 4. li elem. Tej. (index 1) </li> <li> 5. li elem. Szóda. (index 2) </li> </ol> <p> 3. p elem </p> </div> <div> <p> 4. p elem. A return false meghatározással, leállíthatjuk az akciót. </p> <p> 5. p elem </p> <p> 6. p elem </p> </div> <p> 7. p elem </p> <p> 8. p elem </p> <button id="each_tatalom">Kiválasztott li elemek tartalma.</button> <button id="each_tomb">li elemek tartalma, tömbben tárolva.</button> <button id="each_alertli">Alert ablakban<br />Kiválasztott li elemek tartalma.</button> <button id="each_alertstop">Első Alert ablakot követően, további akció letíltása.</button> <button id="each_index">Lekérdezett li elemek, indexének értéke.</button> <button id="each_ujtatalom">Kiválasztott li elemek, egyforma új tartalmat kapnak.</button> <button id="each_ulli">A kiválasztott ul elemben lévő li elemk, tartalma.</button> <button id="each_alertp">Alert ablakban, p elemek tartalma.</button> <button id="each_alertpstop">Harmadik Alert ablakot követően, további akció letíltása.</button> </body>