IT TUTORIJALI | jQuery

jQuery - Prelazak braće i sestara (Traversing Siblings)

Bočno kretanje u DOM stablu

U logičkom smislu su odnosi braća i sestre oni elementi koji dijele istog roditelja. jQuery nudi nekoliko metoda poput: siblings(), next(), nextAll(), nextUntil(), prev(), prevAll() i prevUntil() koje možete koristiti za bočno kretanje u DOM stablu.

jQuery siblings() metoda

jQuery metoda siblings() koristi se za dobijanje bratskih elemenata odabranog elementa. Sljedeći primjer će istaknuti braću i sestre elementa <p>, a to su <h1> i <ul> dodavanjem klase .highlight.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Odabir svih srodnih elemenata u jQuery-ju</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").siblings().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>

Po želji možete uključiti jedan ili više selektor kao parametar u metodu siblings() za filtriranje pretraživanja za braću i sestre. Sljedeći primjer primijeniće samo border-e oko braće i sestara elementa <p>, a to su <ul> elementi.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Odabir određenih elemenata braće i sestara u jQuery-ju</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").siblings("ul").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 next() metoda

jQuery metoda next() koristi se za dobijanje neposredno slijedećeg brata ili sestre, tj. sljedećeg bratskog odabranog elementa. Sljedeći primjer će istaknuti brata od elementa <p>, a to je element <ul>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Odabir sljedećeg bratskog elementa u jQuery-ju</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").next().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 nextAll() metoda

jQuery metoda nextAll() koristi se za dobijanje svih sljedećih braće i sestara odabranog elementa. Sljedeći primjer će istaknuti svu braću i sestre elementa <p> koji dolazi pored njega.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Odabir svih sljedećih bratskih elemenata u jQuery-ju</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").nextAll().addClass("highlight");
});
</script>
</head>
<body>
    <div class="container">
        <h1>IT TUTORIJALI</h1>
        <p>Volim učiti <em>jQuery</em> uz IT TUTORIJALE.</p>
        <p>Ovo je običan paragraf.</p>
        <ul>
            <li>Prva stavka</li>
            <li>Druga stavka</li>
        </ul>
    </div>
</body>
</html>

jQuery nextUntil() metoda

jQuery metoda nextUntil() koristi se za dobijanje svih sljedećih braće i sestara, ali ne uključujući element koji odgovara selektoru. Jednostavnim riječima možemo reći da vraća sve sljedeće elemente braće i sestara između dva zadana elementa u DOM hijerarhiji. Sljedeći primjer će istaknuti sve sljedeće srodne elemente elementa <h1>, isključujući element <ul>, tj. istaknuti oba elementa <p>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Odabir svih sljedećih braća i sestara između dva elementa u jQuery-ju</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("h1").nextUntil("ul").addClass("highlight");
});
</script>
</head>
<body>
    <div class="container">
        <h1>IT TUTORIJALI</h1>
        <p>Volim učiti <em>jQuery</em> uz IT TUTORIJALE.</p>
        <p>Ovo je običan paragraf.</p>
        <ul>
            <li>Prva stavka</li>
            <li>Druga stavka</li>
        </ul>
    </div>
</body>
</html>

jQuery prev() metoda

jQuery metoda prev() koristi se za dobijanje neposredno prethodnog brata ili sestre, tj. prethodnog bratskog odabranog elementa. Sljedeći primjer će istaknuti prethodnu sestru elementa <ul>, a to je element <p>.

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

jQuery prevAll() metoda

jQuery metoda prevAll() koristi se za dobijanje svih prethodnih elementa braće i sestara odabranog elementa. Sljedeći primjer će istaknuti svu braću i sestre elementa <ul> koji dolaze prije toga.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Odabir svih prethodnih bratskih elemenata u jQuery-ju</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul").prevAll().addClass("highlight");
});
</script>
</head>
<body>
    <div class="container">
        <h1>IT TUTORIJALI</h1>
        <p>Volim učiti <em>jQuery</em> uz IT TUTORIJALE.</p>
        <p>Ovo je običan paragraf.</p>
        <ul>
            <li>Prva stavka</li>
            <li>Druga stavka</li>
        </ul>
    </div>
</body>
</html>

jQuery prevUntil() metoda

jQuery metoda prevUntil() koristi se za dobijanje svih prethodnih braće i sestara, ali ne uključujući element koji odgovara selektoru. Jednostavnim riječima možemo reći da vraća sve prethodne elemente braće i sestara između dva zadana elementa u DOM hijerarhiji. Sljedeći primjer će istaknuti sve prethodne bratske elemente elementa <ul> isključujući element <h1>, tj. istaknuti oba elementa <p>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Odabir svih prethodnih braća i sestara između dva elementa u jQuery-ju</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul").prevUntil("h1").addClass("highlight");
});
</script>
</head>
<body>
    <div class="container">
        <h1>IT TUTORIJALI</h1>
        <p>Volim učiti <em>jQuery</em> uz IT TUTORIJALE.</p>
        <p>Ovo je običan paragraf.</p>
        <ul>
            <li>Prva stavka</li>
            <li>Druga stavka</li>
        </ul>
    </div>
</body>
</html>