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>