jQuery - Prelazak precima (Traversing Ancestors)


Prelazak DOM stablom

U logičnim vezama predak je: roditelj, baka, djed, pradjed i tako dalje. jQuery nudi korisne metode poput parent(), parents() i parentsUntil() koje možete koristiti za prelazak u DOM stablu bilo jednan ili više nivoa da biste lako dobili roditelja ili druge pretke elementa u hijerarhiji.



jQuery parent() metoda

jQuery parent() metoda koristi se za dobijanje izravnog nadređenog odabranog elementa. Sljedeći primjer će istaknuti direktni nadređeni element <li> koji je <ul> dodavanjem klase .highlight na dokument.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selektovanje direktnog roditelja elementa u jQuery</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("li").parent().addClass("highlight");
});
</script>
</head>
<body>
    <div class="container">
        <h1>IT TUTORIJALI</h1>
        <p>Volim učiti <em>jQuery</em> uz IT TUTORIJALE.</p>
        <ul>
            <li>Prva stavka</li>
            <li>Druga stavka</li>
        </ul>
    </div>
</body>
</html>


jQuery parents() metoda

jQuery metoda parents() koristi se za dobijanje predaka odabranog elementa. Sljedeći primjer će dodati boreder oko svih predaka elemenata <li>, a to su: <ul>, <div>, <body> i <html> elementi.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Odabir svih elemenata predaka u jQueryju</title>
<style>
    *{
        margin: 10px;
    }
    .frame{
        border: 2px solid green;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("li").parents().addClass("frame");
});
</script>
</head>
<body>
    <div class="container">
        <h1>IT TUTORIJALI</h1>
        <p>Volim učiti <em>jQuery</em> uz IT TUTORIJALE.</p>
        <ul>
            <li>Prva stavka</li>
            <li>Druga stavka</li>
        </ul>
    </div>
</body>
</html>

Takođe možete uključiti jedan ili više selektora kao parametre u metodu parents() za filtriranje pretraživanja predaka. Sljedeći primjer će primijeniti border oko svih predaka <li> koji su <div> elementi.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery parents() Demo</title>
<style>
    *{
        margin: 10px;
    }
    .frame{
        border: 2px solid green;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("li").parents("div").addClass("frame");
});
</script>
</head>
<body>
    <div class="container">
        <h1>IT TUTORIJALI</h1>
        <p>Volim učiti <em>jQuery</em> uz IT TUTORIJALE.</p>
        <ul>
            <li>Prva stavka</li>
            <li>Druga stavka</li>
        </ul>
    </div>
</body>
</html>


jQuery parentsUntil() metoda

jQuery metoda parentsUntil() se koristi za dobijanje svih predaka, ali ne uključujući i element koji odgovara selektoru. Jednostavnim riječima možemo reći da vraća sve elemente pretka između dva zadana elementa u DOM hijerarhiji. Sljedeći primjer će dodati border oko svih elemenata pretka elementa <li> izuzimajući <html>, tj. dodaće border elementu <ul>, <div> i <body>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Odabir svih predaka između dva elementa u jQuery-ju</title>
<style>
    *{
        margin: 10px;
    }
    .frame{
        border: 2px solid green;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("li").parentsUntil("html").addClass("frame");
});
</script>
</head>
<body>
    <div class="container">
        <h1>IT TUTORIJALI</h1>
        <p>Volim učiti <em>jQuery</em> uz IT TUTORIJALE.</p>
        <ul>
            <li>Prva stavka</li>
            <li>Druga stavka</li>
        </ul>
    </div>
</body>
</html>