Főoldalra

jQuery next() prev() siblings()


Rokonelemek olyan elemek, amelyeknek ugyanaz a szülő eleme. 
Kiválasztott elemet követő elemek. (Rokonok.) Első rokonelemtől vagy a kiválasztott elemtől kezdi a keresést.

next()               Visszaadja a kiválasztott elem, következő rokon elemét.

nextAll()           Visszaadja a kiválasztott elem, összes következő rokon elemét.

nextUntil()        Visszaadja a következő rokon elemeket, két megadott paraméter között.
                             Nem határozunk meg paramétert, visszatér az összes következő rokon elemmel.
							 Például az X elemtől az Y elemig keressen:   $("X").nextUntil("Y")   

Kiválasztott elemet megelőző elemek. (Rokonok.) Utolsó rokonelemtől vagy a kiválasztott elemtől kezdi a keresést.

prev()               Visszaadja a kiválasztott elemet megelőző, első rokon elemet.

prevAll()          Visszaadja a kiválasztott elemet megelőző, összes rokon elemet.

prevUntil()       Visszaadja a megelőző rokon elemeket, két megadott paraméter között.
                             Nem határozunk meg paramétert, visszatér az összes korábbi rokon elemmel.
							 Például az X elemtől az Y elemig keressen:   $("X").prevUntil("Y")

Kiválasztott elemet megelőző és azt követő elemek. ( Rokonok.)
 			
siblings() Kiválasztott elem előtt és után lévő, összes elem. (Rokonok, testvérelemek.)
 
siblings("p")Kiválasztott elem előtt és után lévő, összes p elem. (Rokonok, testvérelemek.) 



Megjegyzés:
Ezen oldal teszt példáit, Mozilla-Firefox böngészővel teszteld, mert előfordulhat, hogy  a Google Chrome böngésző, 
oldalfordítást végez, mely zavaró a tesztek megtekintésében.

next() és a prev()

<div class="szomszed01">

<p class="P01">Bekezdés.</p>

<pre class="Pre01">Pre elem.</pre>

<p class="P02">Bekezdés.</p>

<p class="P03" id="P03">Bekezdés. Ez a kiválasztott p elem</p>

    <ul> (Szülő)
  • <li class="Li01"> li elem.</li>
  • <li class="Li02"> li elem.</li>
  • <li class="Li03"> li elem.</li>
  • <li> Ez is li elem. </li>
    • </ul>
    <ol> (Szülő)
  1. <li class="Li01"> li elem. </li>
  2. <li class="Li02"> li elem.</li>
  3. <li class="Li03"> li elem.</li>
  4. <li class="Li04"> li elem.</li>
    5. </ol>

<p class="P03">Bekezdés.</p>

<pre class="Pre02">Pre elem.</pre>

<p class="P05">Bekezdés.</p>

</div>

<p>Ez p elem, az előző div elem következő testvér eleme.</p>

<div class="szomszed02">

<h3>Címsor elem.</h3>

<p>Ez egy p elem, másik div elemben.</p>

</div>

<p>Ez egy P-elem.</p>

Kattints valamelyik button gombra!


next() és prev()


nextAll() és prevAll()


nextUntil() és prevUntil()











L e í r á s.
<head>
	<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<script>
$(document).ready(function(){
  // -----------------------------------   next()  és   prev()   ------------------------------------------------
	$("#next01").click(function(event){
		 $(".P03").next().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	$("#prev01").click(function(event){
		 $(".P03").prev().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	$("#next02").click(function(event){
		 $("#P03").next().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	$("#prev02").click(function(event){
		 $("#P03").prev().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	
	$("#ul_next01").click(function(event){
		 $("ul").next().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	$("#ul_prev01").click(function(event){
		 $("ul").prev().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	
  // ---------------------------------   nextAll()  és  prevAll()  ---------------------------------------------
	$("#nextAll01").click(function(event){
		 $(".P03").nextAll().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	$("#prevAll01").click(function(event){
		 $(".P03").prevAll().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	$("#nextAll02").click(function(event){
		 $("#P03").nextAll().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	$("#prevAll02").click(function(event){
		 $("#P03").prevAll().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	
	$("#ul_nextAll01").click(function(event){
		 $("ul").nextAll().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	$("#ul_prevAll01").click(function(event){
		 $("ul").prevAll().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});


  // -----------------------------  nextUntil()  és   prevUntil()  --------------------------------------------	
	// Megjegyzés, DOM-fa: Ez a módszer keresztezi  rokonok mentén, előre/hátra a DOM elemeket.	

	// A li class="Li03" elem előtt/után, a li class="Li01" elemig.	
	$("#Dom01").click(function(event){
		var DOM = document.getElementsByClassName("li.Li03");  
			$("li.Li01").nextUntil(DOM).css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});	
	  // A li class="Li03" elem előtt/után, csak a class="Li02" azonosítóval rendelkező elemig.
	$("#Dom02").click(function(event){
		var DOM = document.getElementsByClassName("li.Li03");
		$("li.Li01").nextUntil(DOM, ".Li02").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});	
			
  // ----------------------------------------------------- 
	$("#nextUntil01").click(function(event){
	       $("p.P01").nextUntil("pre.Pre02").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
  // -----------------------------------------------------
	$("#prevUntil01").click(function(event){
	       $("p.P05").prevUntil("pre.Pre01").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
  // -----------------------------------------------------
    $("#nextUntil02").click(function(event){
	 $("p.P01").nextUntil("pre.Pre02", ".P03, ul").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
  // -----------------------------------------------------
	$("#prevUntil02").click(function(event){
	 $("p.P05").prevUntil("pre.Pre01", ".P03, ol").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	
});	
</script>
</head>

<body>
<div class="szomszed01">
<p class="P01">Bekezdés.</p>
<pre class="Pre01">Pre elem.</pre>
<p class="P02">Bekezdés.</p>
<p class="P03" id="P03">Bekezdés. Ez a kiválasztott p elem</p>
	<ul> (Szülő)  
    <li class="Li01"> li elem.</li>
    <li class="Li02"> li elem.</li>
    <li class="Li03"> li elem.</li>
    <li> Ez is li elem. </li>
	</ul>
   <ol> (Szülő)
    <li class="Li01"> li elem. </li>
    <li class="Li02"> li elem.</li>
    <li class="Li03"> li elem.</li>
    <li class="Li04"> li elem.</li>
	</ol> 
<p class="P03">Bekezdés.</p>
<pre class="Pre02">Pre elem.</pre>
<p class="P05">Bekezdés.</p> 
</div>
<p>Ez p elem, az előző div elem következő testvér eleme.</p>
        <div class="szomszed02">
           <h3>Címsor elem.</h3>
           <p>Ez egy p elem, másik div elemben.</p>
        </div>
<p>Ez egy P-elem.</p>

<button id="next01">$(".P03").next()</button> 
<button id="prev01">$(".P03").prev()</button> 
<button id="next02">$("#P03").next()</button>  
<button id="prev02">$("#P03").prev()</button> 

<button id="nextAll01">$(".P03").nextAll()</button>  
<button id="prevAll01">$(".P03").prevaLL()</button> 
<button id="nextAll02">$("#P03").nextAll()</button>  
<button id="prevAll02">$("#P03").prevaLL()</button> 

<button id="nextUntil01">$("p.P01").nextUntil("pre.Pre02")</button>  
<button id="prevUntil01">$("p.P05").prevUntil("pre.Pre01")</button> 

<button id="nextUntil02">$("p.P01").nextUntil("pre.Pre02", ".P03, ul")</button>  
<button id="prevUntil02">$("p.P05").prevUntil("pre.Pre01", ".P03, ol")</button> 

<button id="ul_next01">$("ul").next()</button>
<button id="ul_prev01">$("ul").prev()</button>
<button id="ul_nextAll01">$("ul").nextAll()</button>
<button id="ul_prevAll01">$("ul").prevAll()</button>

<button id="Dom01">var DOM = document.getElementsByClassName("li.Li03");$("li.Li01").nextUntil(DOM)</button> 
<button id="Dom02">var DOM = document.getElementsByClassName("li.Li03");$("li.Li01").nextUntil(DOM, ".Li02")</button>

</body>



Testvérek, azaz, siblings() metódus.

Kiválasztott elemet megelőző és azt követő elemek. ( Rokonok.)

<head>
<script>
$(document).ready(function(){
// -------------------------------------------------- Siblings() ----------------------------------------------
	$("#siblings01").click(function(event){
		$(".Hs5").siblings().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	
	$("#siblings02").click(function(event){
		$(".Hs5").siblings("p").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	
	$("#siblings03").click(function(event){
		$(".Hs5").siblings("h4").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	
	$("#siblings04").click(function(event){
		$(".Hs5").siblings("h4, pre").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
	
	$("#siblings05").click(function(event){
		$(".Hs5").siblings("h4, .Ps01, .Ps04").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
});
</script>
</head>
<body>

<p class="Ps01"></p>

<pre class="Pres01"></pre>

<h4 class="Hs4"></h4>

<pre class="Pres02"></pre>

<p class="Ps02"></p>

<h5 class="Hs5"></h5>

<p class="Ps03"></p>

<pre class="Pres03"></pre>

<h4 class="Hs4"></h4>

<pre class="Pres04"></pre>

<p class="Ps04"></p>


 





<button id="siblings01">$(".Hs5").siblings()</button>
<button id="siblings02">$(".Hs5").siblings("p")</button><br /><br />
<button id="siblings03">$(".Hs5").siblings("h4")</button>
<button id="siblings04">$(".Hs5").siblings("h4, pre")</button><br /><br />
<button id="siblings05">$(".Hs5").siblings("h4, .Ps01, .Ps04")</button>

</body>