jQuery closest()
closest() Visszatér kiválasztott elemhez tartozó, kiválasztott legközelebbi ősével.(Szülőelemével.)
Ősök: Szülő - nagyszülő - dédszülő - ükszülő - stb.
Keresés kezdődik az utolsó aktuális (kiválasztott) elemmel, majd megy fel a DOM fában, és visszatér a közvetlen szülő őse, mely megegyezik a kiválasztott szülőelemmel.
Visszatéréskor a visszaadott jQuery objektum: nulla, egy elem, vagy több elem. Megjegyzés: A jQuery hibátlan működéséhez, be kell tartani a szabályos xhtml előírásokat. - Minden kezdő jelölőelemnek, legyen záró eleme. - Ugyanazon id azonosítóval, csak egy jelölőelem szerepelhet. - Ugyanazon class osztályazonosítóval, több jelölőelem is szerepelhet.
Példa
|
<div id="lista">
|
1. 2. 3. 4. 5. 6. 7. |
|
| |
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<script>
$(document).ready(function(){
// Kiválasztott span elem, mint saját maga.
$("#btnT01").click(function(){
$(".Sp01").closest("span").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
});
// Kiválasztott span elem, közvetlen szülőeleme.
$("#btnT02").click(function(){
$(".Sp01").closest("li").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
});
// Kiválasztott span elem, Nagyszülő.
$("#btnT03").click(function(){
$(".Sp01").closest("ul").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
});
// Kiválasztott span elem, Dédszülő.
$("#btnT04").click(function(){
$(".Sp01").closest("div").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
});
// Kiválasztott li elem, közvetlen szülőeleme.
$("#btnT05").click(function(){
$(".LI01").closest("ul").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
});
// Kiválasztott li elem, Nagyszülő.
$("#btnT06").click(function(){
$(".LI01").closest("div").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
});
// Kiválasztott ul elem, közvetlen szülőeleme.
$("#btnT07").click(function(){
$("#UL01").closest("div").css({"color": "black", "border": "2px solid red", "background-color": "orange"});
});
});
</script>
</head>
<body>
<div id="lista">
<ul id="UL01">
<li class="LI01">
<span class="Sp01"> li a szülőeleme.</span>
</li>
</ul>
</div>
<button id="btnT01">$(".Sp01").closest("span") <br /> span gyermek.</button>
<button id="btnT02">$(".Sp01").closest("li") <br /> span szülőeleme.</button> <br />
<button id="btnT03">$(".Sp01").closest("ul") <br /> span nagyszülő.</button>
<button id="btnT04">$(".Sp01").closest("div") <br /> span dédszülő</button> <br />
<button id="btnT05">$(".LI01").closest("ul") <br /> li szülőeleme.</button>
<button id="btnT06">$(".LI01").closest("div") <br /> li nagyszülő.</button> <br />
<button id="btnT07">$("#UL01").closest("div") <br /> ul szülőeleme.</button>
</body>
|
Példa, mely nem teljesen szabályos.
Ebben a példában, nem minden esetben tartjuk be, az xhtml szabályokat, és lekérdezési szabályokat.
Ugyanazon id azonosítóból több is van.
Lekérdezendő elemet pontosan meghatározzuk, vagy általánosságban és nem pontosan határozzuk meg.
|
<div>
<p> <span class="spn"> p a szülőeleme.</span>
<p> <span class="Pspan"> p a szülőeleme.</span>
|
Nem kell elemek, beazonosítása: |