Főoldalra

jQuery event.data() event.result()

<h2> 1. event.data és index() példa. </h2>

<p> Első bekezdés. Vele azonos testvér elemek között, indexe: 0. Kattints ide!
Továbbiakban, a p és button elemek indexét kérdezzük le. </p>

<div>

<p> 1. bekezdés. Vele azonos elemek között, sorszámozás szerint: 0-ik. Kattints ide! </p>

<p> 2. bekezdés. Vele azonos elemek között, sorszámozás szerint: 0-ik. Kattints ide! </p>

</div>
<table style="width: 99.5%; border: 4px inset #ffc;">
<tr><td>

<p> 3. bekezdés. Kattints ide! </p> 

<pre>Első pre elem.</pre>

<p> 4. bekezdés. Kattints ide! </p>

<p> 5. bekezdés. Kattints ide, mit mond a program! $(this).index() értékre?

<br />
<br />

<p> 6. bekezdés. Kattints ide, mit mond a program! $(this).index() értékre?

</td></tr>
</table>

<p> 7. Bekezdés. Kattints ide!




index()
Kiválasztott jelölőelem, közvetlen szülőelem szövegfolyamában lévő, index értéke. (Sorszáma.)
1. Szülőelem a body. Gyermekei: 0=h1; 1=h2; 2=P; 3=button; 4=div; 5=table; 6=P(Mely a 7.bekezdés); 7=button (Mely a 8.);
2. Szülőelem a div. Gyermekei: Nulladik = <p>1; Első = <button> 1; Második = <p>2;
3. Szülőelem a table. Melynek 12. gyermeke, a 7. button elem. (Gyermekelemnek számít, a sorlezáró <br /> utasítás is.)
event.data.value Kiválasztott elem,index értéke. event.result Kiválasztott elemre meghatározott function eredményével tér vissza.
event.data.value
Kiválasztott elem, html fájl szövegfolyamában lévő és vele azonos, összes testvérelem közötti index értéke.
Nem tesz különbséget szülő és szülőelem között.

<span id="span_pbesz">A "p" és "button" elemek számának lekérdezése. Kattints ide!</span>



jQery meghatározások. 
<head>
<script>
$(document).ready(function(){

  // ---------------- Tetszőleges testvérelemek, számának lekérdezése. ---------------------
 var p_elemek_szama = $("p").length;
 var button_elemek_szama = $("button").length;
 
    $("#span_pbesz").click(function(){ 
        alert("A p elemek száma ="+ p_elemek_szama +"\n Button elemek száma ="+button_elemek_szama);
    });
 
 
  // ------- 1. példa. Button elemek indexe. ------------------------------------------------
   for (var i=0; i<button_elemek_szama; i++ ) {
   
      $("button").eq(i).on("click", { value: i }, function( event ) {
		
          var informacios_tomb = 
              [
               "Közvetlen szülőelemhez tartozó, gyermek jelölőelemek között.\nLekérdezetett button elem, indexszáma = "
               + $(this).index(),"\nTestvérelemek közötti indexe = " + event.data.value
              ];
		
            // Az informacios_tomb nevű, tömbben tárolt adatok lekérdezése és kiíratása.
             alert(informacios_tomb.join( ", " ));
      });
   }
  // ------- 2. példa. P elemek indexe. ------------------------------------------------
                                   // each() = Végrehajt egy funkciót minden illeszkedő elemnél.
	var x="valami";
	var i=21;             // Meghatározzuk, hogy mennyi elemet vizsgáljon a program.
	$("p").each(function(i){
		$(this).on("click", {x:i}, function(event){
         alert("Közvetlen szülőelemhez tartozó, gyermek jelölőelemek között,\nkiválasztott elem index() értéke : " 
		 + $(this).index() + ".\n Vele azononos testvér elemek között,\n indexe: " 
		 + event.data.x);
       });
    });
	
});
</script>
</head>
<body>



<h5 id="teszt01">
Kiválasztott, egyedi azonosítóval rendelkező elem, indexe. Kattints ide!
</h5>
<head>
<script>
$(document).ready(function(){
	$("#teszt01").each(function(){
		$(this).click(function(event){
			alert("A kiválasztott teszt01 azonosítóval rendelkező elem, index() értéke : " + $(this).index());
		});
	});
</script>
</head>
<body>




Event result példa


1. Példa. 
<head>
<script>
$(document).ready(function(){

   $("#btnresult").click(function(){
      return "<h5>Hello world!<br /> Eddig kellett várakoznom, mert event.result, most hívott meg.</h5>";
   });

   $("#btnresult").click(function(event){
     $("#result01").html( event.result );
   });
   
});
</script>
</head>
<body>
<button id="btnresult">event.result eredménye.</button>
<h6 id="result01">Kattints a <button> gombra, és láthatod az event.result eredményét.</h6>
<button id="btnresult"> event.result eredménye. </button>
Kattints a <button> gombra, és láthatod az event.result eredményét.




Új teszt megismétléséhez,
kattints ide!


2. Példa. 
<head>
<script>
$(document).ready(function(){
  var p1 = $("p:first").html();                // Lekérdezzük az első "p" elem tartalmát.
	  
	$("#btnresult02").click(function(){
		return p1;
	});
	
	$("#btnresult02").click(function(event){
		$("#result02").html( event.result );
	});
   
});
</script>
</head>

<body>
<button id="btnresult02">event.result eredménye.</button>
<h6 id="result02">Kattints a <button> gombra, és láthatod az event.result eredményét.</h6>
</body>
Megjegyzés:
A lekérdezett <p> elem tartalma, ezen oldal elején található.

<button id="btnresult02"> event.result eredménye. </button>
Kattints a <button> gombra, és láthatod az event.result eredményét.




Új teszt megismétléséhez,
kattints ide!