Come selezionare gli elementi per ordine in jQuery

Il linguaggio jQuery mi permette di selezionare gli elementi del documento html in base all'ordine, aggiungendo al selettore un metodo eq() che specifica la posizione dell'elemento nella pagina.

$('p:eq(n)').text('nuovo testo');

Dove n è l'indice dell'elemento nella pagina web.

Il primo elemento ha sempre indice zero, il secondo ha indice uno e così via.

A cosa serve? Ad esempio, se nel documento ci sono più tag <p>, posso selezionare soltanto il primo, l'ultimo, quelli superiori o minori a un determinato indice, ecc.

    Un esempio pratico

    Esempio 1 ( primo elemento )

    Nel documento html ho cinque paragrafi

    <p>Primo paragrafo</p>
    <p>Secondo paragrafo</p>
    <p>Terzo paragrafo</p>
    <p>Quarto paragrafo</p>
    <p>Quinto paragrafo</p>

    Per selezionare e modificare il testo del primo paragrafo uso il metodo :eq(0)

    $('p:eq(0)').text('nuovo testo');

    Lo script cambia il testo soltanto al primo paragrafo <p> della pagina.

    Avrei potuto usare anche il metodo :first

    $('p:first').text('nuovo testo');

    Esempio 2 ( ultimo elemento )

    Per cambiare il testo all'ultimo paragrafo uso il metodo :eq(4)

    $('p:eq(4)').text('nuovo testo');

    oppure il metodo :last

    $('p:last').text('nuovo testo');

    Esempio 3 ( indice dispari )

    Per cambiare il testo a tutti i paragrafi <p> con indice dispari uso il metodo :even

    $('p:even').text('nuovo testo');

    Lo script seleziona il primo, il terzo, il quinto paragrafo.

    Esempio 4 ( indice pari )

    Per cambiare il testo a tutti i paragrafi <p> con indice pari uso il metodo :odd

    $('p:odd').text('nuovo testo');

    Lo script seleziona il secondo e il quarto paragrafo.

    Esempio 5 ( indice superiore a )

    Per cambiare il testo a tutti i paragrafi <p> con indice superiore a 2 uso il metodo :gt(2)

    $('p:gt(2)').text('nuovo testo');

    Lo script seleziona il quarto (indice 3) e il quinto (indice 4) paragrafo del documento.

    Esempio 6 ( indice inferiore a )

    Per cambiare il testo a tutti i paragrafi <p> con indice inferiore a 2 uso il metodo :lt(2)

    $('p:lt(2)').text('nuovo testo');

    Lo script seleziona il primo (indice 0) e il secondo (indice 1) paragrafo del documento.

    E così via.

     


     

    Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

    FacebookTwitterLinkedinLinkedin
    knowledge base

    I selettori di jQuery