jQuery - Prelazak potomaka (Traversing Descendants)


Prelazak dolje DOM stablom

U logičnim vezama potomak je dijete, unuk, praunuče itd. jQuery nudi korisne metode kao što su: children() i find() koje možete koristiti za prelazak u DOM stablo bilo jedan ili više nivoa da biste lako pronašli ili dobili dijete ili druge potomke elementa u hijerarhiji.



jQuery children() metoda

jQuery metoda children() koristi se za dobijanje izravnih podređenih elemenata odabranog elementa. Sljedeći primjer će istaknuti izravno podređenost elementa <ul> koji je <li> dodavanjem klase će na dokument.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Odabir izravnih podređenih elemenata u jQueryju</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul").children().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 find() metoda

jQuery metoda find() koristi se za dobijanje potomstvenih elemenata odabranog elementa. Metode find() i children() su slične, osim što metoda find() pretražuje više nivoa kroz DOM stablo do posljednjeg potomka, dok metoda children() pretražuje samo jedan nivo niz DOM stablo. Sljedeći primjer će dodati border oko svih <li> elemenata koji su potomci elementa <div>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Odabir određenih elemenata 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(){
    $("div").find("li").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>

Međutim, ako želite dobiti sve potomstvene elemente, možete koristiti univerzalni selektor.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Odabir svih potomstvenih elemenata 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(){
    $("div").find("*").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>