Logo Diario Intimo

jQuery: Selezione alternata di elementi di una lista

Sullivan |

Al caricamento della pagina html il codice jQuery 'selezione alternata' evidenzia gli elementi 'nav' pari (0, 2, 4) dell'elenco sottostante. Poiché l'indice, in un processo di iterazione (repeat), parte sempre da 0 in realtà ad essere selezionati sono gli elementi 'nav' dispari (1, 3, 5) della pagina stessa.
Ogni 'nav' è associato ad una classe univoca, 'multimedia'; quindi il seguente metodo di selezione $('.multimedia') costituisce un 'wrapped set' (l'insieme di elementi del DOM [Document Object Model] individuati dal selettore) con i 5 elementi 'nav' di classe 'multimedia'.

    // Selezione alternata di Elementi del DOM (NB: gli INDICI partono da 0)
    // Elementi 'nav' pari (0, 2, 4) (operatore: %; significato: resto; [il resto di index/2])
    // Esempio di uso di %: se X=11 l'operazione X % 5 dà come risultato X=1
    // 11/5=2 con resto di 1
    // Classe 'zebra' (CSS) = .zebra {background: #f7eed3 url(../images/bg_xlightpink.png);}
    // Il Codice jQuery completo lo trovate qui: SCRIPT[1]
  
    var navs = $('.multimedia');    // = operatore di assegnazione
    navs.addClass( 
        function(index) {
            if (index % 2 == 0) {    // == operatore di uguaglianza
                return 'zebra';    // ritorna 'zebra' per gli Elementi pari (0 2 4)
            }
        }
    );
    // 'nav' diventa \'nav\': segno di 'escape' che precede virgolette contenute tra virgolette   
    var text = 'Gli Elementi \'nav\' evidenziati applicando la classe \'zebra\' sono: ';
    var text2 = ' ( ';
    for (i = 0; i < navs.length; i++) {
        var onClasse = $(navs[i]).hasClass('zebra');  // variabile onClasse = 'true' o 'false'
        if (onClasse) {   // se la condizione è soddisfatta (se onClasse='true')
            text += i + ", ";   // equivalente a [text = text + i + ", ";]
            text2 += (i+1) + " ";   // Ricordate? Gli indici partono da 0!
        }
    }
    if (text.substr(-2) === ', ') {   // === operatore di uguaglianza rigida
        text = text.substr(0, text.length - 2);	
    }
    $('#riassunto').append(text + text2 + ')');
    
    (Fonte: jQuery di E. Amedeo)
    [modifiche al codice: Sullivan]
  

Scarica il codice degli esempi