DOM traversing in jQuery

Si può attraversare la struttura di un documento HTML, XML (DOM trasversale) con l'ausilio di un legame di parentela, tra parent, child, sibilings, find

Sintassi sul DOM traversing in jQuery

.parent("selettore") : // risale al genitore (solo il primo) dell'elemento selezionato (è possibile anche filtrare con un selettore)
.parents("selettore") : // risale agli antentati di ogni elemento selezionato (è possibile anche filtrare con un selettore)
.parentsUntil( $("selettore") , "filter" ) // risale agli antenati fino a quello indicato, (è possibile anche filtrare con un selettore)
.children("selettore") : // Arriva ai figli di ogni elemento nell'insieme di elementi abbinati,  (è possibile anche filtrare con un selettore)
.find("selettore") : // Arriva ai discendenti di ogni elemento nel set corrente, filtrati da un selettore, un oggetto jQuery o un elemento.
.sibilings("selettore") // seleziona tutti gli altri fratelli (ma non quello selezionato)
.prev("selettore") // seleziona il precedente (1 solo) - (fratelli)
.prevAll("selettore") // seleziona TUTTI i precedenti (fratelli)
.prevUntil( $("selettore") , "filter" ) // seleziona TUTTI i fratelli che si trovano tra quelli selezionati
.next("selettore") // seleziona il successivo (1 solo) - (fratelli)
.nextAll("selettore") // seleziona TUTTI i successivi (fratelli)
.nextUntil( $("selettore") , "filter" ) // seleziona TUTTI i fratelli che si trovano tra quelli selezionati

Esempio di DOM traversing in jQuery

Codice della Lezione : DOM traversing in jQuery

// inizializzazione jQuery
$(document).ready(function(){
    // parent, parents , parentsUntil
    // parent : prende solo il primo genitore 
    $('#button1').click(function(){
        $('.DOMchild').parent().css('border','2px solid #e76f51')
    });
    //parents : risale il DOM fino al più remoto
    $('#button2').click(function(){
        $('.DOMchild').parents().css('border','2px solid #B03618')
    });
    //parentsUntil : specifica fino a quale "parente" arrivare
    $('#button3').click(function(){
        $('.DOMchild').parentsUntil('.DOMtraversing').css('border','2px solid #E24E29')
    });
    // children , find 
    $('#button4').click(function(){
        // children : seleziona il figlio o i figli dell'elemento selezionato
        $('.DOMparent:first').children().css('border','2px solid #E27155')
    });    
    // find : cerca all'interno del tag selezionato il figlio (o i figli)
    $('#button5').click(function(){
        $('.DOMparent').find('span').css('border','2px solid #E85651')
    });    
    $('#button6').click(function(){
        $('.DOMtraversing').find('span:eq(1) , .DOMparent:last').css('border','2px solid #E88951');
    });    

    $('#button7').on('click',function(){
        // sibilings: seleziona tutti gli altri fratelli (ma non quello selezionato)
        $('#parent1').siblings().css('border','2px solid #E88951');
    });
    $('#button8').on('click',function(){
        // prev: seleziona il precedente (1 solo) - (fratelli)
        $('#parent3').prev().css('border','2px solid #E88951');
    });
    $('#button9').on('click',function(){
        // prevAll: seleziona TUTTI i precedenti (fratelli)
        $('.DOMchild:last').prevAll().css('border','2px solid #E88951');
    });
    $('#button10').on('click',function(){
        // prevUntil: seleziona TUTTI i fratelli che si trovano tra quelli selezionati
        $('.DOMchild:eq(0)').prevUntil('.DOMchild:eq(1)').css('border','2px solid #E88951');
    });
    $('#button11').on('click',function(){
        // next: seleziona il successivo (1 solo) - (fratelli)
        $('#parent3').next().css('border','2px solid #E88951');
    });
    $('#button12').on('click',function(){
        // nextAll: seleziona TUTTI i successivi (fratelli)
        $('#parent2').nextAll().css('border','2px solid #E88951');
    });
    $('#button13').on('click',function(){
        // nextUntil: seleziona TUTTI i fratelli che si trovano tra quelli selezionati
        $('.DOMparent > p:first').nextUntil('DOMparent > p:last').css('border','2px solid #E88951');
    });
});