Mit Javascript eine "class" ändern

[DestinatioN]

Hallo,
ich habe auf meiner Webseite ein Menü, bei dem mithilfe von Javascript eine "class" geändert werden soll, dass möchte ich mit jQuery verwirklichen.
Dies ist mein Menü

<ul id="main-menu">
	<li class="sub"><a href="?page=homepage">Homepage</a></li>
	<li class="sub"><a href="">Test-Seiten</a>
		<ul id="main-menu">
			<li class="sub"><a href="?page=test">Test</a></li>
			<li class="sub"><a href="?page=messages">Messages</a></li>
			<li class="sub"><a href="?page=table">Table</a></li>
			<li class="sub"><a href="?page=design">Design</a></li>
		</ul>
	</li>
</ul>

Und dies ist bis jetzt mein Javascript:

if($( "#main-menu" ).find(".sub").children( "#main-menu" )){
	$( ".sub" ).toggleClass("has-sub")
}else{
	
}

Die genaue "class", die geändert werden soll, ist die z.B. bei dem "<li>"-Tag Test-Seiten, weil es dort nur ein Untermenü gibt.

Nur mit meinem Anfangscode komme ich nicht zu meinem Ergebnis.

 

[kkapsner]

Wie wird denn dein Menü aufgebaut? Hast du das per Hand in das HTML geschrieben oder kommt das aus einem serverseitigen Skript? Wenn letzteres würde ich das Problem auf dem Server erschlagen.

Wenn nicht musst du durch die <li>s durchiterieren und dann prüfen. Z.B. so:

[].slice.call(document.getElementById("main-menu").getElementsByClassName("sub")).forEach(function(sub){
	if (sub.getElementsbyTagName("ul").length){
		sub.className += " has-sub";
	}
});;

ABER du hast sowieso invalides HTML, da eine ID dokumentenweit eindeutig sein muss.

PS: Warum verwendest du da eigentlich toggleClass? addClass wäre doch sinnvoller.

 

[DestinatioN]

Danke schon einmal für die schnelle Antwort.

Also das Menü wird aus einer Datenbank herraus erstellt. Und ich versuche dies mit jQuery zu verwirklichen.
Die Abfrage dafür sieht wie folgt aus.

<?php
	// create an array to hold the references
	$refs = array();

	// create and array to hold the list
	$list = array();

	// the query to fetch the menu data
	$sql = "SELECT * FROM mainmenu ORDER BY menu_item_sorting";

	// get the results of the query
	$result = mysql_query($sql);

	// loop over the results
	while($data = @mysql_fetch_assoc($result))
	{
        // Assign by reference
        $thisref = &$refs[ $data['menu_item_id'] ];

        // add the the menu parent
		$thisref['menu_item_name'] = $data['menu_item_name'];
		$thisref['menu_item_url'] = $data['menu_item_url'];
		$thisref['menu_item_description'] = $data['menu_item_description'];

		$list[ $data['menu_item_id'] ] = &$thisref;
	}

	// Create a HTML list from an array
	function create_list( $arr )
	{
        $html = "\n<ul id='main-menn'>\n";
        foreach ($arr as $key=>$output) 
        {
			$html .= "<li class='has-sub'><a href=".$output['menu_item_url']."><span>".$output['menu_item_name']."</span></a></li>\n";
		}
		$html .= "</ul>\n";
		return $html;
	}

	echo create_list( $list );
?>

Und das HTML-Ergebnis ist wie in meinem ersten Post geschrieben

<ul id="main-menu">
	<li class="sub"><a href="?page=homepage">Homepage</a></li>
	<li class="sub"><a href="">Test-Seiten</a>
		<ul id="main-menu">
			<li class="sub"><a href="?page=test">Test</a></li>
			<li class="sub"><a href="?page=messages">Messages</a></li>
			<li class="sub"><a href="?page=table">Table</a></li>
			<li class="sub"><a href="?page=design">Design</a></li>
		</ul>
	</li>
</ul>

Mit meinem css-Code sieht es momentan so aus.




Mit der class "has-sub", die es bekommen soll, sieht das ganze dann so aus
normal

hover

Also muss die class has-sub nur hinzugefügt werden, wenn es in dem li noch ein ul gibt.

 

[kkapsner]

Also dieses PHP erzeugt den HTML-Code ganz sicher nicht...

 

[DestinatioN]

AW: Mit Javascript eine &quot;class&quot; ändern

Doch die Daten werde aus einer Tabelle, die so aussieht ausgelesen.

menu_item_id	menu_item_name	menu_item_url	menu_item_parent_id	menu_item_item_sorting
1	Homepage	?page=homepage	0	1
2	Test-Seiten		0	2
3	Test	?page=test	2	0
4	Messages	?page=messages	2	0

- - - Aktualisiert - - -

Ich habe es jetzt geschafft.

Lösung

$("#main-menu li ul").parent("li").addClass("has-sub");