Filtrare le selezioni in jQuery

JQuery non solo rende semplice selezionare elementi del DOM, ma fornisce anche potenti strumenti per filtrare queste selezioni. Questo permette agli sviluppatori di affinare ulteriormente le loro selezioni per manipolare solo gli elementi che soddisfano specifici criteri. Ma come filtrare le selezioni in jQuery? Vediamolo con esempi pratici.

Cos’è il filtraggio delle selezioni in jQuery?

Il filtraggio delle selezioni in jQuery si riferisce all’applicazione di criteri aggiuntivi a una selezione esistente per restringere l’insieme degli elementi manipolati. Questo è utile per selezionare elementi specifici all’interno di un gruppo più grande basandosi su posizione, stato, o altre proprietà.

Metodi comuni per filtrare selezioni in jQuery

jQuery offre diversi metodi per filtrare le selezioni:

• .first() e .last(): Selezionano rispettivamente il primo o l’ultimo elemento in un insieme di elementi.

• .eq(index): Seleziona un elemento in una posizione specifica, indicizzata da zero.

• .filter(selector): Filtra l’insieme di elementi selezionati mantenendo solo quelli che corrispondono al selettore fornito.

• .not(selector): Rimuove gli elementi che corrispondono al selettore specificato dall’insieme selezionato.

• .has(selector): Seleziona tutti gli elementi che contengono almeno un elemento che corrisponde al selettore specificato.

• .is(selector): Restituisce true se almeno uno degli elementi selezionati corrisponde al selettore.

Come filtrare selezioni in jQuery: esempi pratici

Vediamo, ora, come i metodi finora illustrati possono essere utilizzati in un contesto reale.

HTML di esempio

<div>
    <p>Paragrafo 1</p>
    <p class="active">Paragrafo 2</p>
    <p>Paragrafo 3</p>
    <p>Paragrafo 4</p>
</div>

Codice jQuery

$(document).ready(function() {
    // Seleziona e evidenzia il primo paragrafo
    $("p").first().css("color", "red");

    // Seleziona e evidenzia l'ultimo paragrafo
    $("p").last().css("color", "blue");

    // Seleziona il terzo paragrafo (indice 2) e cambia il suo testo
    $("p").eq(2).text("Questo è il terzo paragrafo");

    // Filtra i paragrafi con la classe 'active'
    $("p").filter(".active").css("font-weight", "bold");

    // Esclude i paragrafi con la classe 'active'
    $("p").not(".active").css("background-color", "lightgrey");

    // Seleziona div che contengono paragrafi con classe 'active'
    $("div").has("p.active").css("border", "2px solid green");

    // Verifica se ci sono paragrafi attivi
    if ($("p").is(".active")) {
        console.log("Ci sono paragrafi attivi!");
    }
});