2010-10-19 10 views
14

Sto utilizzando il seguente jQuery per modificare le classi sugli elementi in un elenco non ordinato. Non sembra che sia il modo più efficace per ottenere l'effetto. C'è un modo migliore per scrivere questo?jQuery removeClass su genitore/fratello/figlio

$(function() { 
    $('nav li a').click(function() { 
     $(this).parent().siblings().children().removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

Grazie

S

risposta

38

di solito è più semplice in questi casi per fissare il gestore per il <li> e lasciare che il click bubble up dal <a> (che avviene per impostazione predefinita). Allora il tuo gestore è simile al seguente:

$(function() { 
    $('nav li').click(function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
    }); 
}); 

Poi nel CSS basta spiegare active essere sul <li>, in questo modo:

li.active a { color: red; } 

Per inciso, se si hanno molti <li> elementi che si' ll desidera utilizzare .delegate() come questo:

$('nav').delegate('li', 'click', function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
}); 
+0

Perfetto! Grazie - delegato è esattamente quello che stavo cercando. – simonyoung

5

noti inoltre che se si desidera rimuovere 'active' fro m tutti gli elementi eccetto this allora si potrebbe ottenere via con qualcosa di semplice come

$('.active').removeClass('active'); 
$(this).addClass('active'); 

e che dovrebbe propagarsi attraverso l'albero piuttosto facilmente. Tuttavia, posso vederlo causare un mal di testa sulle prestazioni se il DOM è molto popolato.

0

ho usato sopra il codice, si sta lavorando

sto utilizzando nel mio codice

enter code here : function addnewStepsUpper(){ 
jQuery('.hide_upper_clone_class').clone().insertAfter(".upper_clone_class1"); 
jQuery('.upper_clone_class1').siblings().removeClass('hide_upper_clone_class'); 

}

Grazie Vishal Sanwar

Problemi correlati