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()
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 0 | Cella 1 | Cella 2 | Cella 3 | Cella 4 |
Cella 0 | Cella 1 | Cella 2 | Cella 3 | Cella 4 |
Cella 0 | Cella 1 | Cella 2 | Cella 3 | Cella 4 |
Cella 0 | Cella 1 | Cella 2 | Cella 3 | Cella 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');
});
});