Főoldalra

jQuery each() metódus


 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>
    <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>
  1. <li> 3. li elem. Kávé. (index 0) </li>
  2. <li> 4. li elem. Tej. (index 1) </li>
  3. <li> 5. li elem. Szóda. (index 2) </li>
  4. </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>




<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>