jQuery esplorazione - Filtraggio

Con jQuery, possiamo facilmente filtrare vari elementi da una lista di elementi DOM.

In questa sezione, spiegheremo come restringere la ricerca degli elementi nell'albero DOM.

Filtrare l'albero DOM

Abbiamo i seguenti metodi jQuery per selezionare gli elementi in base alla loro posizione in un gruppo di elementi:

• first()

• last()

• eq()

• filter()

• not()

• has()

• is()

Di seguito vi mostreremo come utilizzare ogni metodo.

Metodo jQuery first()

jQuery first()Il metodo restituisce il primo elemento selezionato.

Esempio di evidenziazione del primo paragrafo:

$("document").ready(function(){
　　$("p").first().css("background", "coral");
});

Metodo jQuery last()

jQuery last()Il metodo restituisce l'ultimo elemento selezionato.

Esempio di evidenziazione dell'ultimo paragrafo:

$("document").ready(function(){
　　$("p").last().css("background", "coral");
});

Metodo jQuery eq()

jQuery eq()Il metodo restituisce l'elemento con l'indice specifico dell'elemento selezionato.

L'indice inizia sempre da 0, quindi il primo numero avrà l'indice 0 (non 1).

Esempio di selezione del terzo paragrafo (indice 2):

$("button").click(function(){
　　$("p").eq(2).css("background-color", "red");
});

Metodo filter() jQuery

jQuery filter()Il metodo restituisce gli elementi che corrispondono a una condizione specifica.

Questo metodo elimina tutti gli elementi che non corrispondono alle condizioni selezionate e restituisce quelli che corrispondono.

Esempio di ritorno di tutti i paragrafi con il nome della classe "demo":

$("document").ready(function(){
　　$("p").filter(".demo").css("background", "coral");
});

Esempio di ritorno di tutti gli elementi della lista pari:

$("document").ready(function(){
　　$("li").filter(":even").css("background", "coral");
});

Metodo jQuery not()

jQuery not()Il metodo restituisce gli elementi che non corrispondono a una condizione specifica.

Questo metodo è simile afilter()Il metodo è il contrario.

Esempio di ritorno di tutti i paragrafi che non hanno il nome della classe "demo":

$("document").ready(function(){
　　$("p").not(".demo").css("background", "coral");
});

Metodo has() jQuery

jQuery has()Questo metodo restituisce tutti gli elementi che corrispondono al selettore specificato, inclusi uno o più elementi.

L'esempio seguente restituisce tutti i paragrafi che contengono l'elemento <span>:

$("document").ready(function(){
　　$("p").has("span").css("background-color", "coral");
});

Metodo is() jQuery

jQuery is()Questo metodo verifica se uno degli elementi selezionati corrisponde ai parametri forniti.

Se almeno uno di questi elementi corrisponde ai parametri forniti, questo metodo restituisce true, altrimenti restituisce false.

L'esempio seguente verifica se il genitore di <p> è l'elemento <div>:

$("document").ready(function(){
　　$("p").parent().is("div");
});

Riferimento esplorazione jQuery

Per informazioni complete sui metodi di esplorazione, visitare il nostroRiferimento esplorazione jQuery.