Come usare jquery next() per selezionare il prossimo div per classe

Question

Sono abbastanza nuovo per jquery e alle prese con qualcosa che dovrebbe essere abbastanza semplice. Voglio selezionare il div precedente e successivo con la classe "MenuItem" dal div con classe "MenuItemSelected".

HTML

<div id="MenuContainer" class="MenuContainer"> 
    <div id="MainMenu" class="MainMenu"> 
     <div class="MenuItem"> 
      <div class="MenuItemText">Menu Item #1</div> 
      <div class="MenuItemImage">images/test1.jpg</div> 
     </div>  
     <div class="MenuDividerContainer"> 
      <div class="MenuDivider"></div> 
     </div> 
     <div class="MenuItem MenuItemSelected"> 
      <div class="MenuItemText">Menu Item #2</div> 
      <div class="MenuItemImage">images/test2.jpg</div> 
     </div> 
     <div class="MenuDividerContainer"> 
      <div class="MenuDivider"></div> 
     </div> 
     <div class="MenuItem"> 
      <div class="MenuItemText">Menu Item #3</div> 
      <div class="MenuItemImage">images/test3.jpg</div> 
     </div> 
    </div><!--/ .MainMenu --> 
</div><!--/ .MenuContainer --> 

Ecco la jquery per il prossimo che ho pensato dovrebbe aver funzionato.

$('div.MenuItemSelected').next('.MenuItem'); 

Ho anche provato

$('div.MenuItemSelected').nextAll('.MenuItem'); 

L'unica cosa che ho potuto ottenere al lavoro è

$('div.MenuItemSelected').next().next(); 

Che sembra hokey, tutte le idee?

Answer 1

Hai provato:

$('div.MenuItemSelected').nextAll('.MenuItem:first'); 

Credo che il problema che si trovano ad affrontare è che next restituisce la prossima fratelli, mentre nextAll restituisce un insieme di tutti i fratelli successivi che corrispondono ai criteri di selezione. L'applicazione del selettore :first al tuo filtro nextAll dovrebbe rendere le cose corrette.

vorrei sottolineare, che se la struttura del markup è coerente (in modo che sia sempre garantito il funzionamento), allora la vostra attuale soluzione potenza (punto di riferimento, punto di riferimento, punto di riferimento) essere il modo più veloce:

$('div.MenuItemSelected').next().next(); 

Answer 2

Hai provato: .parent() e .children()? http://docs.jquery.com/Traversing