Főoldalra

jQuery wrap.


wrap()             Kiválasztott elemet vagy elemeket, általunk meghatározott új jelölőelemmel veszi körbe. (Körbezárja)
                         <div új elem> <p kiválasztott>.............</p> </div>
                          <b új elem> <p kiválasztott>.............</p> </b>
							 
wrapInner()     Kiválasztott elembe vagy elemekbe, általunk meghatározott új jelölőelemet helyez el, kezdő és záró elemként.
                         <p kiválasztott> <div új elem>.............</div> </p>
                         <p kiválasztott> <b új elem>...............</b> </p>

wrapAll()        Kiválasztott elemet vagy elemeket, tartalmukkal együtt kiveszi a szövegfolyamból, 
                        majd azokat másik területen, az általunk meghatározott új jelölőelemmel körbezárva helyezi el.
 Alaphelyzetben ott helyezi el szövegfolyamban az általunk meghatározott új elemet, és vele együtt a becsomagolt elemeket tartalmukkal együtt,
 ahol a kiválasztott elemek közül, az elsőt megtalálja. 
						
unwrap() 	 Kiválasztott elemhez vagy elemekhez tartozó, közvetlen szülő elemet, eltávolítja.


wrap metódusok bemutatója.


Tesztelésnél figyeljük meg, új elemek hatására hól történik változás, meglévő elemeken belül, vagy azokon kívül!

<p class="P01"> Első p elem, tartalma.




<div class="Wszulo"> Közvetlen szülőeleme, a class="Wgyermek" - nek.

<p class="Wgyermek"> elem tartalma. zöld kerettel és fehér háttérszínnel.




<div class="szimpla">
</div >

<div class="wrapAlldiv"> 
Ez pre elem, a wrapAlldiv területén van.
<div class="wrapAlldiv02"> 
Ez pre elem, a wrapAlldiv02 területén van.
</div ></div >

A button gombokra, kattints egyszer!
Nézd meg, mi történt.
Majd kattints, többször is.






















Begyűjtött elemek megjelenítéséhez, felhasználhatunk már meglévő elemet is, tulajdonságával együtt.
Felhasználandó elemnek, weboldalunk tetszőleges részén létezni kell, tartalommal vagy tartalom nélkül.
Fent, van egy szimpla div elemünk, tartalom nélkül, és van div a divben területünk is.
Következő teszteknél, ezeket használjuk fel tulajdonságukkal együtt, begyűjtött elemek megjelenítéséhez.




Megfigyelhettük, hogy a már meglévő elemek felhasználásakor, felhasznált elem és tartalma megmaradt eredeti helyén, és fentebb a begyűjtött elemekkel együtt is.
Felhasznált elemet, csak másolja (klónozza).

Program leírása, wrap metódusoknak.

<head>
    <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
        <style>
             .P01, .Wgyermek{border: 3px solid green; background: white; padding: 15px;}
             .Wszulo{border: 3px solid black; background: yellow; padding: 10px;}
             .Kivalasztottak{border: 3px solid red; padding: 5px; background: orange;}
             .wrapstilus{border: 4px solid red; margin: 2px; padding: 2px; background: Orange;}
             .wrapstilus02{border: 4px solid green; margin: 2px; padding: 2px; background: Orange;}
        </style>
<script>
$(document).ready(function(){
 // -- Kiválasztott elemet vagy elemeket, körbezárja egy új elemmel és annak stílusával, melyet a zárójelek között meghatározunk.
	$("#wrap").click(function(){
        $(".P01, .Wgyermek, .Wszulo").wrap("<div class='Kivalasztottak'></div>");
    });
	
 // -- Kiválasztott elembe vagy elemekbe helyez, egy új elemmet annak stílusával, melyet a zárójelek között meghatározunk.
	$("#wrapInner").click(function(){	
		$(".P01, .Wgyermek, .Wszulo").wrapInner("<div class='Kivalasztottak'></div>");
    });
	
 // --- wrapAll() Begyűjti az összes kiválasztott elemet (p), és az itt meghatározott div elembe helyezi.
 // Ebben a példában,  div elemet ott helyezi el a dokumentumban , ahol a kiválasztottak közül, az első elemet megtalálja.
	$("#wrapAll").click(function(){
        $("p").wrapAll("<div class=' wrapstilus '></div>");
    });
	
 // --- wrapAll() Begyűjti az összes kiválasztott elemet (h2), és az itt meghatározott div elembe helyezi.
 // Ebben a példában,  div elemet ott helyezi el a dokumentumban , ahol a kiválasztottak közül, az első elemet megtalálja.
	$("#wrapAll02").click(function(){
        $("h2").wrapAll("<div class=' wrapstilus '></div>");
    });
	
 // --- unwrap() Törli a kiválasztott elem, közvetlen szülőelemét.
	$("#unwrap").click(function(){
        $(".Wgyermek").unwrap();
    });
	
 // Fenti wrapAll példát, így is meghatározhatjuk.
	$("#btn02wrapAll").click(function(){
        $("p").wrapAll(document.createElement("div"));
    });
 // Megjelenítés dupla elemben.	
	$("#wrapAlldupla").click(function(){
        $("p").wrapAll("<div class='wrapstilus'><div class='wrapstilus02'></div></div>");
    });
	
 // Begyűjtött elemekhez, meglévő elem felhasználása, tulajdonságával együtt.
	$("#wrapAll_szimpla").click(function(){
        $("p").wrapAll( $(".szimpla") );
    });
	$("#wrapAll_uresdupla").click(function(){
        $("p").wrapAll( $(".wrapAlldiv") );
    });
	$("#wrapAll_dupla").click(function(){
        $("p").wrapAll( $(".wrapAlldiv02") );
    });
});
</script>
</head>
<body>
  <p class="P01"> Első  p elem, tartalma. </p>
   <br />
  <div class="Wszulo">  Közvetlen szülőeleme, a class="Wgyermek" - nek.
         <p class="Wgyermek"> elem tartalma. Zöld kerettel és fehér háttérszínnel.</p> 
  </div>

<p>A button gombokra,  kattints, többször is.</p>
<button id="wrap">wrap()<br />Körbezárás kívül!</button> <br />
<button id="wrapInner">wrapInner()<br />Körbezárás belül!</button> <br />
<button id="wrapAll">wrapAll()<br />P elemek begyűjtése!</button> <br />
<button id="wrapAll02">wrapAll()<br />H2 elemek begyűjtése!</button> <br />
<button id="unwrap">unwrap()<br />Wgyermek szülőelemének törlése!</button>

</body>

Megjegyzés:
Szelektornál jelölőelemet határozunk meg, akkor a dokumentumban lévő vele azonos összes elemre érvényes a meghatározás.
Szelektornál pontosan meghatározzuk, mely elemek kellenek, (Például: id vagy class azonosítóval) akkor csak a kiválasztottakra érvényes a meghatározás.




2. unwrap() bemutató.

unwrap() metódus eltávolítja kiválasztott elem vagy elemek közvetlen szülőelemének jelölőelemét, de annak tartalmát nem.

Következő pédában, a class="wgyermek" elem elődei:
Szülőelem; Nagyszülőelem; Dédszülőelem; Ükszülőelem; és így tovább a body elemig, mely a legősibb szülőelem.
Töröljük közvetlen szülőelemét, akkor a nagyszülő lesz a közvetlen szülőeleme, dédszülőből lesz a nagyszülő, ükszülőből lesz a dédszülő.
Ismét töröljük a közvetlen szülőelemét, akkor a dédszülő lesz a közvetlen szülőeleme, ükszülő lesz a nagyszülő.
Közvetlen szülőelem törlését, ismételhetjük a body elemig. A body elemet akkor sem törli, ha ő a közvetlen szülőelem.

Teszteléshez:
- Elsőként a parent gombra kattintsunk, ez megmutatja a közvetlen szülőelemet.
- Másodszor az unwrap gombra kattintsunk, és töröljük a szülőelemet.
- Harmadszor ismét a parent gombra kattintsunk.
- Negyedszer ismét az unwrap gombra kattintsunk, és így tovább.
- Minden törlést követően, figyeljük, hogy mi történik. 


// parent()    Visszaadja kiválasztott elem, közvetlen szülőelemét.
     $("#btnParent").click(function(){
          $(".wgyermek").parent().css("background-color", "green");
     });
	
// unwrap()    Eltávolítja kiválasztott elem vagy elemek közvetlen szülőelemét.
     $("#btnunwrap").click(function(){
          $(".wgyermek").unwrap();
     });

<div> Ükszülője a class="wgyermek" elemnek.

Ez egy p bekezdés tartalma.


<div>Dédszülője a class="wgyermek" elemnek.

Ez egy p bekezdés tartalma.


<div>Nagyszülője a class="wgyermek" elemnek.

Ez egy p bekezdés tartalma.


<div> Szülőeleme a class="wgyermek" elemnek.

Ez egy p bekezdés tartalma, és közvetlen gyermeke a szülő elemnek.


<div class="wgyermek">

Ez a div, közvetlen gyermeke, a id="wszulo" elemnek.

</div>

Ez is egy p bekezdés tartalma, és közvetlen gyermeke a szülő elemnek.


</div>
</div>
</div>
</div>










3. wrapAll( ) meghatározott területen.

A wrapAll () metódus:
Az általunk kiválasztott elemtípussal megegyező összes elemet tartalmával együtt, kiveszi a szövegfolyamból, és átpakolja egy általunk meghatározott HTML elembe.
Alaphelyzetben ott helyezi el szövegfolyamban az általunk meghatározott új elemet, és vele együtt a becsomagolt elemeket tartalmukkal együtt, ahol a kiválasztott elemek közül, az elsőt megtalálja.

Következő példában, a már meglévő p elemeket tartalmukkal együtt, kivesszük a szövegfolyamból, és elhelyezzük általunk meghatározott területen a szövegfolyamban, egy div elembe.


<head>
    <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
        <style>
             .wrapstilus{border: 4px solid red; margin: 2px; padding: 2px; background: Orange;}
        </style>
<script>
$(document).ready(function(){
//  Így az általunk kiválasztott elem területén írja ki, kiválasztott elemeket.
//  Az .addClass("wrapstilus") metódus nem kötelező.

     $("#wrapAllter").click(function(){
                        var kivalasztottak = $("p").wrapAll().addClass("wrapstilus")          
           $("#kupac").html(kivalasztottak);
     });
	
     $("#wrapAllter02").click(function(){
                       var kivalasztottak = $("h2").wrapAll().addClass("wrapstilus")          
           $("#kupac").html(kivalasztottak);
     });
});
</script>
</head>
<body>

<button id="wrapAllter">wrapAll()<br />p elemek, begyűjtése.<br />Kattints ide!.</button>
<button id="wrapAllter02">wrapAll()<br />h2 elemek, begyűjtése.<br />Kattints ide!.</button>

<div id="kupac" style="min-height:500px; border: 3px solid green; padding:5px;">Begyűjtött elemeket, ide írja ki!</div>

</body>




Begyűjtött elemeket, ide írja ki!



4. wrapInner() példák.


<p>Teszt elemek.</p>

<div class="klassz"> Hello Joon! Érted mi történik? </div>

<p>Ez egy p elem, mely a div elemek között helyezkedik el.</p>

<div class="klassz"> Hello! Kezdem kitapasztalni, mi történik? </div>

<p>Ez is egy p elem, mely a div elemek között helyezkedik el.</p>

<div class="klassz"> Sziasztok! Én eddig értem. De mi a haszna, ezt mondjátok meg! </div>


<div class="klassz"> Sziasztok! Vegyek be a csoportba. Én is a class="klassz" azonosítóval rendelkezek! </div>

A wrapInner( ) metódus (innerHTML) megadott HTML elembe pakolja a tartalmat, minden kiválasztott elemnél.




class="klassz" osztályazonosítóval rendelkező elemekbe,
div elemet helyezünk el.
.ujelem{border:3px solid Orangered; padding:4px; background:Coral;}
Minden p és h2 elem tartalmát,
span elembe és meghatározott stílusba csomagolunk.



<p>Minden p elembe, új <b> elemet helyezünk el, melynek hatására, minden p szövege (bold) vastagon lesz kiemelve.</p>


Így is meghatározhatjuk. ---->


Megjegyzés!
A teljes dokumentációt magába foglaló elem manipulálásához, nem mindegy, hogy milyen stílus van meghatározva.
<div id="dokumentum"> Dokumentáció </div>
1. Példa: #dokumentum{margin-right: auto; margin-left: auto;}
2. Példa: #dokumentum{position:absolute; top: 30px; left: 30px;}


Ez a meghatározás a teljes body területre vonatkozik, azaz, minden olyan elemre, melyek pozíciójának meghatározása, nem absolute.




Teljes dokumentációt magába foglaló elemnek, absolute pozíció van meghatározva.
Ebben az esetben, elem kiválasztásnál nem a bodyt, hanem a #dokumentum azonosítót kell kijelölni.






Megjegyzés, példák érvényes bemeneteire:

1. $( elem ).wrapInner( "<div class='azonosito'> </div>" );
2. $( elem ).wrapInner( "<div class=\"azonosito\"> </div>" );