jQuery parent() offsetParent()

offsetParent()         Visszaadja kiválasztott, és elsőként elhelyezett elem, szülő elemét. (Ősszülőt body)
                                                Kiválasztott elem, position:absolute div elem területén van, akkor a legidősebb őse: body és a div.
parent()                  Visszaadja kiválasztott elem, közvetlen szülőelemét.

parents()                Visszaadja kiválasztott elem, lemenő ágában lévő szülőelemeket. (Ősszülőig.)

parentsUntil()         Visszaadja kiválasztott elem szülőelemét, két megadott paraméter között.

offsetParent() Legidősebb ős, a body elem. Az a div, melynek position:absolute meghatározása van, egyenrangú lesz a body elemmel.
Ekkor a program, első őselemnek, a body és a position:absolute meghatározással rendelkező elemet jelöli ki.
Olyan elemet választunk ki, mely:
1. Position:absolute elem területén van, akkor a legidősebb őse: body és a div absolute.
2. Nem a position:absolute elem területén van, akkor a legidősebb őse: body.

<div>

<p> Kattints lejebb az 1. majd a 2. button gombra, háttérszín jelzi, első elhelyezett szülő elemét, a bekezdésnek. </p>

<p id="eP01"> Kattints lejebb a 4. button gombra, visszaadja minden p elem, közvetlen szülő elemét. </p>

</div>

offsetParent(): Legidősebb szülőelem (ős). Kattints a button gombokra!

</div>

<div>

<head>
	<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<script>
$(document).ready(function(){	

// ------- Legidősebb szülőelem --------------------------------------------------------------------------
    $("#LegSz01").click(function(){
        $("p").offsetParent().css({"color": "black", "border": "10px solid red", "background-color": "orange"});
    });
// ------------------------------------------------------------
    $("#LegSz02").click(function(){
        $("#P01").offsetParent().css({"color": "black", "border": "10px solid red", "background-color": "orange"});
    });
// ------------------------------------------------------------
    $("#LegSz03").click(function(){
        $("ul").offsetParent().css({"color": "black", "border": "10px solid red", "background-color": "orange"});
    });
	
// ------ Közvetlen szülőelem  ---------------------------------------------------------------------------

    $("#Ksz01").click(function(){
        $("p").parent().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
    $("#Ksz02").click(function(){
        $("li").parent().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
    $("#Ksz03").click(function(){
        $("span").parent().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
	
    $("#Ksz04").click(function(){
        $("#P02").parent().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
	
    $("#Ksz05").click(function(){
        $("#Li03").parent().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
	
    $("#Ksz06").click(function(){
        $("#sPan").parent().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });

    $("#Ksz07").click(function(){
        $(".Clas").parent().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });

    $("#Ksz08").click(function(){
        $("p.Clas").parent().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });

    $("#Ksz09").click(function(){
        $("span.Clas").parent().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
	
	$("#Ksz10").click(function(){
		$("span").parent("li").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
    $("#Ksz11").click(function(){
		$("p").parent("div").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
	
	
// ----- parentsUntil ------------------------------------------------------------------------------------
	
    $("#parunti01").click(function(){
		$("span").parentsUntil("div").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
    $("#parunti02").click(function(){
		$("span").parentsUntil("div", "ul").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
    $("#parunti03").click(function(){
		$("span").parentsUntil("body", "p, li, div").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
    $("#parunti04").click(function(){
		var classNev = document.getElementsByClassName("Li01");
         $(".Clas").parentsUntil(classNev).css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});
    $("#parunti05").click(function(){
		var classNev = document.getElementsByClassName("Li01");
         $(".Clas").parentsUntil(classNev, "ul").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
	});

// --------- parents() -- Családfa felépülése visszafelé az ős elemig. -----------------------------------
    $("#Par01").click(function(){
        $("#eP01").parents().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
    $("#Par02").click(function(){
        $("#eP02").parents().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
    $("#Par03").click(function(){
        $("#P01").parents().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
    $("#Par04").click(function(){
        $("#P02").parents().css({"color": "black", "border": "2px solid red", "background-color": "orange"});
    });
	
});
</script>
</head>
<body>
<div style="font-size: 12px; border:1px solid black;width:65%;position:absolute;left:240px;top:400px; background-color: white;">
	<div style="font-size: 12px; padding-left: 20px; border:1px solid black; margin:15px; background-color:yellow">
		<p> Kattints lejebb az 1. majd a 2. button gombra, háttérszín jelzi, első elhelyezett szülő elemét, a bekezdésnek. </p>
		<p id="eP01"> Kattints lejebb a 4. button gombra, visszaadja minden p elem, közvetlen szülő elemét. </p>
	</div>
</div>
<h6>&nbsp;</h6><h6>&nbsp;</h6><br /><br /><br />
<p id="eP02">Bekezdés.</p>

<div id="D01" class="szulok">
	<span class="Clas">Ez span elem</span> <br />
	<p id="P01" class="Clas"> p elem.</p>
   <div id="D02>
        <div id="D03>
            <ul id="UL01">  
                <li class="Li01">  <span class="Clas">span elem.<span></li>
                <li class="Li02">  <span id="sPan">span elem.<span></li>
            </ul>
            <p id="P02"> p elem.</p>			
         </div>
		
         <div id="D04>
            <ul id="UL02">  
                <li id="Li03" class="Clas">  <span> span elem. <span></li>
                <li class="Li02">  <span class="Clas">span elem.<span></li>
            </ul>
            <p id="P03" class="Clas">Ez p elem</p>
        </div>
   </div>
    <span>Ez span elem</span><br />
    <p id="P04"> p elem.>/p>
</div>

<button id="LegSz01">1. $("p").offsetParent()<br />P elem absolute területen.</button>
<button id="LegSz02">2. $("#P01").offsetParent()<br />P elem, nem absolute területen.</button>
<button id="LegSz03">3.$("ul").offsetParent()<br />ul elem, nem absolute területen.</button>

<p>parents(): Minden előd, az ős szülőelemig.</p>
<button id="Par01">$("#eP01").parents() <br />id="eP01"</button>
<button id="Par02">$("#eP02").parents() <br />id="eP02"</button>
<button id="Par03">$("#P01").parents() <br />id="P01"</button><br />
<button id="Par04">$("#P02").parents() <br />id="P02"</button>
<br />
<p>parent(): Közvetlen szülőelem.<br />Kiválasztott elem, jelölőelemét írjuk be.</p>
<button id="Ksz01">4. $("p").parent() <br />Minden p elem, szülőeleme.</button><br />
<button id="Ksz02">5. $("li").parent() <br />Minden li elem,  szülőeleme.</button><br />
<button id="Ksz03">6. $("span").parent() <br />Minden span elem, szülőeleme.</button><br />
<button id="Ksz10">$("span").parent("li")<br />span, melyeknek li a szülőeleme.</button><br />
<button id="Ksz11">$("p").parent("div")<br />p, melyeknek div a szülőeleme.</button><br />

<p>Kiválasztott elem, id azonosítóját írjuk be.</p>
<button id="Ksz04">$("#P02").parent() <br />p id="P02"</button>
<button id="Ksz05">$("#Li03").parent() <br />li id="LI03"</button>
<button id="Ksz06">$("#sPan").parent() <br />span id="sPan"</button>

<p>Kiválasztott elem, class azonosítóját írjuk be.</p>
<button id="Ksz07">$(".Clas").parent() <br />Minden class="Clas"</button><br />
<button id="Ksz08">$("p.Clas").parent() <br />p class="Clas"</button><br />
<button id="Ksz09">$("span.Clas").parent() <br />span class="Clas"</button><br />

<p>parentsUntil, két megadott paraméter között.</p>
<button id="parunti01">$("span").parentsUntil("div")<br /> Kattints ide!</button>
<button id="parunti02">$("span").parentsUntil("div", "ul")<br /> Kattints ide!</button><br />
<button id="parunti03">$("span").parentsUntil("body", "p, li, div")<br /> Kattints ide!</button><br />
<button id="parunti04">var classNev = document.getElementsByClassName("Li01");<br />$(".Clas").parentsUntil(classNev)</button><br />
<button id="parunti05">var classNev = document.getElementsByClassName("Li01");<br />$(".Clas").parentsUntil(classNev, "ul")</button>

</body>

Faszerkezet:
var faBejaras = $("p").parent().map(function() { return this.tagName;}).get().join(", "); $("#Faszerkezet").after("<b>" + faBejaras + "</b>");
var faBejaras = $("span").parent().map(function() { return this.tagName;}).get().join(", "); $("#Faszerkezet").after("" + faBejaras + "");
var faBejaras = $("ul").parent().map(function() { return this.tagName;}).get().join(", "); $("#Faszerkezet").after("" + faBejaras + "");
var faBejaras = $("li").parent().map(function(){ return this.tagName;}).get().join(", "); $("#Faszerkezet").after("" + faBejaras + "");