DOM filtering in jQuery

DOM filtering in jQuery

I metodi per filtrare attraverso il DOM più elementari sono first(), last() ed eq(), che consentono di selezionare un elemento specifico in base alla sua posizione in un gruppo di elementi.

indice

Sintassi DOM filtering in jQuery

.first() // seleziona il primo elemento
.last() // seleziona l'ultimo elemento
.eq('0') // seleziona in base alla posizione (equal)
.filter() // filtra, ad esempio, elementi pari e dispari
.not() // seleziona tutti tranne quello indicato
.slice() // taglia e crea un range da a
.has() // tutti gli elementi che hanno il tag selezionato all'interno di has()

Esempio di DOM filtering in jQuery

DOM

Child

Child

Child

Child

Child

Child

Child

Child

Child

Child

Child

Child

Codice della Lezione : DOM filtering in jQuery

// inizializzazione jQuery
$(document).ready(function(){
    // first, last , eq , filter, not, slice , has
    $('#button1').click(function(){
        // first : seleziona il primo elemento
        $('.DOMchild').first().css('border','2px solid #E88951');
    });
    $('#button2').click(function(){
        // last : seleziona l'ultimo elemento
        $('.DOMchild').last().css('border','2px solid #E88951');
    });
    $('#button3').click(function(){
        // eq : seleziona in base alla posizione (equal)
        $('.DOMchild').eq('1').css('border','2px solid #E88951');
    });
    $('#button4').click(function(){
        // filter : filtra, ad esempio, elementi pari e dispari
        $('.DOMchild').filter(':even').css('border','2px solid #E88951');
    });
    $('#button5').click(function(){
        // not : seleziona tutti tranne quello indicato
        $('.DOMchild').not(':last').css('border','2px solid #E88951');
    });
    $('#button6').click(function(){
        // slice : taglia e crea un range da a
        $('.DOMchild').slice(0,1).css('border','2px solid #E88951');
    });
    $('#button7').click(function(){
        // has : tutti gli elementi che hanno il tag selezionato all'interno di has()
        $('.DOMchild').has('span').css('border','2px solid #E88951');
    });
}); 

Scritto da Donato Pirolo

Ciao, sono Donato, frontend developer con una smisurata passione per la SEO. Creo strumenti ad hoc per aiutare aziende e professionisti ad essere cercati sul web e trovare clienti.

Potrebbero interessarti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Copyright © 2022
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram