Il selettore in relazione agli elementi in jQuery

Il selettore in relazione agli elementi in jQuery

La Selezione in relazione agli elementi mi permette di selezionare in base alle relazioni, come first-child, last-child, only-child, nth-child(), +, >

indice

Sintassi dei selettori in base alla posizione in jQuery

$(':first-child') // seleziona il primo figlio
$('last-child')  // seleziona l'ultimo figlio
$(':nth-child(..)') // seleziona il figlio del genitore per indice (con un numero)
$(':only-child') // seleziona il figlio unico, quello che non ha dei fratelli
$('div > p') //seleziona i figli diretti
$('p + span') //seleziona dei sibilings

Esempio sui selettori in base alla posizione in jQuery

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

testo di esempio .testo di esempio .testo di esempio .testo di esempio .testo di esempio .

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Questa è una nota d'esempio

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

$(document).ready(function(){
    $('#button1').click(function(){
        // first child e last child - individuare primo figlio e l'ultimo figlio
        $('.boxTXT p:first-child').hide(4000);
        $('.boxTXT p:last-child').hide(4000);
    });
    $('#button2').click(function(){
        // seleziona il figlio del genitore, in questo caso il 3 figlio
        $('.boxTXT > p:nth-child(3)').hide(4000);
    });
    $('#button3').click(function(){
        // seleziona il figlio unico, quello che non ha dei fratelli
        $('.boxTXT span:only-child').hide(4000);
    });
    $('#button4').click(function(){
        // seleziona il figlio diretto con > 
        $('.boxTXT > p').hide(4000);
    });
    $('#button5').click(function(){
        // seleziona dei siblings
        $('p + note').hide(4000);
    });
});       

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