2009-08-24 6 views
1

Erstens muss ich Betonung, dass die HTML vorge erzeugt wird und nicht verändert werden kann - sonst würde ich es nicht auf diese Weise tun:)ändern CSS-Klasse basiert auf Existenz

So ....

Das Skript und der HTML-Code unten erstellen ein nettes Versteck-/Zeige-Menü. Wenn Sie auf den Navheader klicken, wird das Navitem sichtbar.

Allerdings möchte ich die CSS-Klasse des Navheaders basierend darauf ändern, ob Navitem direkt darunter liegt.

z.B.

navheader (Change Class to linksbelow) 
    navitem 
navheader (Change Class to NOlinksbelow) 
navheader (Change Class to NOlinksbelow) 
navheader (Change Class to linksbelow) 
    navitem 
etc.... 

Meine HTML und JQUERY:

<script> 
    $(function() { 
      $('.Nav table .navitem').hide(); 
       $('.Nav table.navheader').click(function() { 
        $(this).parent().parent().next().find(".navitem").slideToggle('100'); 
       }); 
      }); 
</script> 

<div class="Nav"> 

<table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
     <td> 
      <table class="navheader"> 
       <tr> 
        <td> 
         <a class="navheader" href="#">Header Link 1</a> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <table> 
       <tr> 
        <td> 
         <table class="navitem"> 
          <tr> 
           <td> 
            <a class="navitem" href="#">Link 1</a> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <table class="navheader"> 
       <tr> 
        <td> 
         <a class="navheader" href="#">Header link 2</a> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

</div> 

Antwort

1

Ok, der spezielle Fall scheint nicht heraus zu arbeiten, wenn nur CSS-Selektoren verwenden (wie es gibt nicht so etwas wie ein ‚früheres Geschwister-Selektor‘) , so dass es ein wenig komplexer sein müssen werden:

$('.Nav tr:has(table.navheader)').each(function (i, elmnt) { 
    if($(elmnt).next().find('table.navitem').length > 0) 
     $(elmnt).find('table.navheader').addClass('linksbelow') 
}); 
+0

sein kompliziert, aber es funktioniert, jedoch gilt es, die Klasse zu der TR nicht die navheader. Irgendwelche Zeiger? – CLiown

+0

Oh ja, 'tschuldigung, vergaß das ... gib mir eine Minute, ich werde versuchen, es auszuarbeiten. – JorenB

+0

Ich denke du könntest einfach $ (...). Parent(). AddClass ('link ...'); – epascarello