IT TUTORIJALI | jQuery

jQuery - Filtriranje (Filtering)

Filtriranje izbabranig elemenata

jQuery nudi nekoliko metoda kao što su: filter(), first(), last(), eq(), slice(), has(), not() itd. koje možete koristiti za sužavanje pretraživanja elemenata u DOM-u stablu.

jQuery first() metoda

jQuery metoda first() filtrira skup podudarnih elemenata i vraća prvi element iz skupa. Sljedeći primjer će samo istaknuti prvi element <li> unutar elementa <ul> dodavanjem klase .highlight.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selektovanje prvog 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 li").first().addClass("highlight");
});
</script>
</head>
<body>
    <h2>Neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
    <hr>
    <h2>Druga neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
</body>
</html>

jQuery last() metoda

jQuery metoda last() filtrira skup podudarnih elemenata i vraća zadnji element iz skupa. Sljedeći primjer će samo istaknuti zadnji element <li> unutar elementa <ul> dodavanjem klase .highlight.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selektovanje zadnjeg 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 li").last().addClass("highlight");
});
</script>
</head>
<body>
    <h2>Neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
    <hr>
    <h2>Druga neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
</body>
</html>

jQuery eq() metoda

jQuery metoda eq() filtrira skup podudarnih elemenata i vraća samo jedan element s navedenim indeksnim brojem. Sljedeći primjer će istaknuti drugi element <li> unutar elementa <ul> dodavanjem klase .highlight.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selektovanje elementa indeksom 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 li").eq(1).addClass("highlight");
});
</script>
</head>
<body>
    <h2>Neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
    <hr>
    <h2>Druga neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
</body>
</html>

Napomena!

Indeks dostavljen metodi eq() označava položaj elementa zasnovan na 0, što znači da indeks 0 cilja prvi element, indeks 1 cilja drugi element i tako dalje. Takođe se ovaj indeks odnosi na položaj elementa unutar jQuery objekta, a ne unutar DOM stabla.

Možete odrediti i negativni indeksni broj. Negativni indeksni broj označava poziciju koja počinje od kraja skupa, a ne od početka. Na primjer, eq(-2) označava drugi posljednji element u skupu podudarnih elemenata.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selektovanje elementa negativnim indeksom 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 li").eq(-2).addClass("highlight");
});
</script>
</head>
<body>
    <h2>Neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
    <hr>
    <h2>Druga neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
</body>
</html>

jQuery filter() metoda

jQuery metoda filter() može uzeti selektor ili funkciju kao svoj argument za filtriranje skupa podudarnih elemenata na osnovu određenih kriterija. Isporučeni selektor ili funkcija metode filter() testira se prema svakom elementu u skupu podudarnih elemenata i svi elementi koji odgovaraju isporučenom selektoru ili prođu test funkcije biće uključeni u rezultat.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Filtriranje elemenata u jQuery-ju putem selektora</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").filter(":even").addClass("highlight");
});
</script>
</head>
<body>
    <h2>Neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
    <hr>
    <h2>Druga neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
</body>
</html>

Kao što je ranije rečeno, takođe možete prosljediti funkciju metodi filter() za filtriranje skupa podudarnih elemenata na temelju određenih uslova. Sljedeći će primjer testirati svaki <li> element unutar <ul> i istaknuti one <li> elemente čiji su indeksi neparni brojevi, tj. ističe samo drugu i četvrtu stavku liste, jer je indeks zasnovan na nuli.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Filtriranje elemenata u jQuery-ju putem funkcije</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("ul li").filter(function(index){
        return index % 2 !== 0;
    }).addClass("highlight");
});
</script>
</head>
<body>
    <h2>Neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
    <hr>
    <h2>Druga neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
</body>
</html>

jQuery has() metoda

jQuery metoda has() filtrira skup podudarnih elemenata i vraća samo one elemente koji imaju navedeni potomak. Sljedeći primjer će istaknuti sve <li> elemente koji imaju potomke <ul> elementa.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Odabir elemenata koji sadrže određene podređene elemente 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 li").has("ul").addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>Sekcija 1</li>
        <li>Sekcija 2</li>
        <li>
            <ul>
                <li>Sekcija 2.1</li>
                <li>Sekcija 2.2</li>
                <li>Sekcija 2.3</li>
            </ul>
        </li>
        <li>Sekcija 4</li>
    </ul>
</body>
</html>

jQuery not() metoda

jQuery metoda not() filtrira skup podudarnih elemenata i vraća sve elemente koji ne udovoljavaju navedenim uslovima. Kao argument može uzeti selektor ili funkciju. Isporučeni selektor ili funkcija metode not() testira se prema svakom elementu u skupu podudarnih elemenata i svi elementi koji se ne podudaraju s isporučenim selektorom ili prođu test funkcije biće uključeni u rezultat.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selektovanje elemenata koji se ne podudaraju sa uslovima 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 li").not(":even").addClass("highlight");
});
</script>
</head>
<body>
    <h2>Neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
    <hr>
    <h2>Druga neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
</body>
</html>

jQuery metoda not() može uzeti funkciju kao svoj argument na isti način na koji to radi filter(), ali radi upravo suprotno od metode filter(), tj. elementi koji prolaze test funkcije su izuzeti, a ostali elementi su uključeni u rezultat. Sljedeći primjer će testirati svaki <li> element unutar <ul> i istaknuti one <li> elemente čiji indeksi nisu neparni brojevi, tj. ističe prvu i treću stavku popisa.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selektovanje elemenata koji nisu prošli test funkcije 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 li").not(function(index){
        return index % 2 !== 0;
    }).addClass("highlight");
});
</script>
</head>
<body>
    <h2>Neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
    <hr>
    <h2>Druga neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
</body>
</html>

jQuery slice() metoda

jQuery metoda slice() filtrira skup podudarnih elemenata specifikovanih nizom indeksa. Ova metoda prihvata početni i krajnji (neobavezni) broj indeksa kao argumente, gdje početni indeks određuje poziciju na kojoj počinju biti odabrani elementi, a krajnji indeks određuje poziciju na kojoj elementi prestaju biti odabrani. Sljedeći primjer će istaknuti prvi i drugi element <li> unutar elementa <ul> dodavanjem klase .highlight.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selektovanje elemenata prema rasponu indeksa 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 li").slice(0, 2).addClass("highlight");
});
</script>
</head>
<body>
    <h2>Neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
    <hr>
    <h2>Druga neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
</body>
</html>

Možete odrediti i negativne indeksne brojeve. Negativni indeksni broj označava poziciju koja počinje od kraja skupa, a ne od početka. Na primjer, slice(-2, -1) označava samo treću stavku popisa, jer je jedina stavka u rasponu između dvije s kraja (-2) i jedne s kraja (-1), kao krajnji položaj nije uključen u rezultat.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selektovanje elemenata prema rasponu negativnih indeksa 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 li").slice(-2, -1).addClass("highlight");
});
</script>
</head>
<body>
    <h2>Neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
    <hr>
    <h2>Druga neuređena lista</h2>
    <ul>
        <li>Prva stavka</li>
        <li>Druga stavka</li>
        <li>Treća stavka</li>
        <li>Četvrta stavka</li>
    </ul>
</body>
</html>