6 find, next, prev, parent, children

Pubblicato il di

find

creiamo una serie di div colorati in cascata con il primo che contiene gli altri

<body>
<div id="principale" style="height: 400px; width: 400px; background: blue; padding: 50px">
    <div id="principale" style="height: 400px; width: 400px; background: red; padding: 50px">
        <div id="principale" style="height: 400px; width: 400px; background: green; padding: 50px">
            <div id="principale" style="height: 400px; width: 400px; background: yellow; padding: 50px">
                <div id="principale" style="height: 400px; width: 400px; background: black; padding: 50px">
                </div>
            </div>
        </div>
    </div>
</div>
</body>

Il primo div ha un id chiamato principale. Ora creiamo bottone per applicare un bordo bianco a tutti i div discendenti dal principale.

<button onclick="testFind()" style="position: fixed; top: 10px; right: 500px;"> FIND! </button>

al click richiamo la funzione testFind() che andrò a creare

$('#principale').find().css('border','dashed white 2px');

seleziono il tag con id principale e da questo risultato trovo (con il metodo find() ) tutti i div da lui discendenti, a cui applico lo stile css del bordo.

Da notare che avrei potuto assegnare una classe generica ai div, selezionare con jQuery la classe e applicare un filtro escludendo il div principale. In questo caso il risultato non cambiava, ma in una situazione reale avrei potuto avere numerosi div sparsi per il DOM con la stessa classe, ma a noi interessavano solo i discendenti di quello principale e non altri, quindi il filtro non sarebbe stata la strada corretta.

prev e next , parent

creiamo questa lista ul:

  • Tennis
    1. Maschile
    2. Femminile
  • Atletica
    1. Indoor
    2. Outdoor

ecco il codice

<ul>
    <li id="T"> Tennis
    <ol>
        <li id="M"> Maschile </li>
        <li id="F"> Femminile </li>
    </ol>
    </li>

    <li id="A"> Atletica
    <ol>
        <li id="I"> Indoor </li>
        <li id="O"> Outdoor</li>
    </ol>
    </li>
</ul>

creiamo un bottone che lancia la funzione test() per cambiare colore e dare grassetto a maschile e contemporaneamente altro colore a femminile

<button onclick="test()" style="position: fixed; top: 10px; left: 200px;"> GO! </button>

ora la funzione test()

function test() {
$('#F').css('color', 'red').prev().css('color','blue').css('font-weight','bold');
   }

aggancio l’id = F cambio colore poi con il metodo prev(), ovvero seleziona poi l’elemento precedente sul DOM e applica le altre regole css. Da notare che attribuisco in cascata più metodi.

Stessa cosa potevo agganciare l’id M e usare il metodo next() cioè prossimo elemento.

$('#M').css('color', 'blue').css('font-weight','bold').next().css('color','red');

Ottimi metodi per usare una sola riga per più comandi, facciamo di più applichiamo un bordo verde ai 2 elementi e diamo una larghezza di 150px, come agendo sul loro parente il tag <ol> con il metodo parent() 

$('#M').css('color', 'blue').css('font-weight','bold').next().css('color','red').parent().css('border','1px solid green').css('width','150px');

quindi dopo aver modificato l’elemento con id F, quello con id M, da quest’ultimo vai al suo parente cioè l'<ol>. Da quest’ultimo posso usare un altro .parent() per selezionare l’ <li> Tennis genitore , da qui usare next() per andare al prossimo <li> Atletica e con Children() selezionare i suoi figli per colorarli differentemente

$('#M').css('color', 'blue').css('font-weight','bold').next().css('color','red').parent().css('border','1px solid green')
    .css('width','150px').parent().next().children().css('color','pink')

Pensiamo se le voci <li> per atletica fossero diverse:

<li id="A"> Atletica 
 <ol> 
  <li id="I"> Indoor </li> 
  <li id="O"> Outdoor</li> 
  <li id="O"> Leggera</li> 
  <li id="O"> Pesi</li>  
 </ol> 
</li>

nextAll , prevAll

volessi dare un colore differente a tutte le successive, potrei certamente selezionare il primo elemento ( Indoor #I) e poi con .next() colorare il successivo e poi ancora con .next() quello dopo e così via… Diventerebbe scomodo e ripetitivo. Fortunatamente ci viene in contro nextAll() che permette, una volta selezionato il primo elemento, di selezionare tutti quelli successivi

$('#I').nextAll().css('color','blue');

analogamente posso agganciare l’ultimo e poi con prevAll(), selezionare tutti i suoi fratelli precedenti fino al primo.