Il selettore in base alla posizione in jQuery

Il selettore in base alla posizione in jQuery

La Selezione in base alla posizione mi permette di selezionare in base alle posizioni, come first,last,odd,eq(),lt(),gt()

indice

Sintassi dei selettori in base alla posizione in jQuery

$(':first') // seleziona il primo elemento
$(':last') // seleziona l'ultimo elemento
$(':odd') // seleziona i dispari partendo da 0 (indice)
$(':eq(..)') //seleziona in base alla posizione partando da 0 (indice)
$(':lt(..)') //selezione LESS and THEN (indice) Seleziona tutti quelli che vanno da 0 al numero indicato (deprecato)
$(':gt(..)') //selezione LESS and THEN (indice) Seleziona tutti quelli che vanno dal numero indicato in poi (deprecato)

Esempio sui selettori in base alla posizione in jQuery

Cella 0Cella 1Cella 2Cella 3Cella 4
Cella 0Cella 1Cella 2Cella 3Cella 4
Cella 0Cella 1Cella 2Cella 3Cella 4
Cella 0Cella 1Cella 2Cella 3Cella 4

Codice della Lezione : Dei selettori in base alla posizione in jQuery

//inizializzazione Jquery
$(document).ready(function(){
    $('#button1').click(function(){
        //seleziona solo il primo paragrafo di <p> e di <table>
        $('#statab tr:first').css('background-color','orange');
    });
    $('#button2').click(function(){
        //seleziona solo i PARI partendo da 0 (indice)
        $('#statab tr:even').css('background-color','blue');
    });
    $('#button3').click(function(){
        //seleziona solo i DISPARI partendo da 0 (indice)
        $('#statab tr:odd').css('background-color','blue');
    });
    $('#button4').click(function(){
        //seleziona l'elemento in base alla posizione (indice)
        $('#statab tr:eq(2)').css('background-color','gray');

    });
    $('#button5').click(function(){
        $('#statab tr:eq(2)').css('background-color','gray');

    });
    $('#button6').click(function(){
        //selezione LESS and THEN (indice) Seleziona tutti quelli che vanno da 0 al numero indicato (deprecato)
        $('#statab tr:lt(3)').css('background-color','yellow');
        $('#statab td:lt(3)').css('background-color','gray');
    });

    $('#button7').click(function(){
        //selezione LESS and THEN (indice) Seleziona tutti quelli che vanno dal numero indicato in poi (deprecato)
        $('#statab tr:gt(1) , p:gt(2)').css('background-color','yellow');
    });
}); 

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