2011-08-28 19 views
7

Ho la struttura del menu successiva.Jquery seleziona l'elemento successivo

<li class="menu-422"><a href="item-1" title="">Item 1</a></li> 
<li class="menu-444"><a href="item-2" title="">Item 2</a></li> 
<li class="menu-449"><a href="item-3" title="">Item 3</a></li> 
<li class="menu-452"><a href="item-4" title="">Item 4</a></li> 

In questa struttura gli elementi (il tag-a) hanno lo sfondo. Voglio cambiare lo sfondo dell'elemento successivo sull'evento hover. Se ho superato l'articolo 2, voglio cambiare lo sfondo dell'articolo 3. L'ho provato con jQuery, ma non ho trovato il codice appropriato.

jQuery("#mymenu li a").hover(function() { 
    jQuery(this).next("li a").css('background', 'none'); 
} 

ho provato con nextAll, con percorso completo selettore, ma non può selezionare l'elemento successivo.

risposta

13

Al passaggio del mouse, si vuole salire al genitore li, quindi utilizzare next() per arrivare al prossimo li, poi find('a') all'interno di quel li:

$("#mymenu li a").hover(function() { 
    $(this).parent().next().find("a").css('background', 'none'); 
}); 
+0

Wow, grazie. Sta funzionando. Ti sono molto grato. – danyg

0

Invece di selezionare le ancore si può semplicemente selezionare li e allegare l'evento hover su di esso. E in hover basta usare il metodo next per ottenere il prossimo elemento li e cambiare lo sfondo. Suppongo che tu non abbia lo sfondo impostato per l'ancora perché sto cambiando lo sfondo dell'elemento li.

$("#mymenu li").hover(function() { 
    $(this).next().css('background', 'none'); 
    //If you want to change the background of anchor try this 
    //$(this).next().find('a').css('background', 'none'); 
}