| 

.NET C# Java Javascript Exception

1
Hallo zusmmen,

nach welchen befehlen (selectoren) muss ich suchen wenn ich von einem Kindelement dessen Elternelement ansprechen will?

was ich vorhab:
Einem Untermenüpunkt das die Klasse "active" bekommen hat dessen Hauptmenüpunkt auch die Klasse "active" zu verpassen damit man sieht wo man sich gerade befindet weil ja der Untermenüpunkt zwar markiert wird aber durch das wieder einklappen nicht sichtbar ist.

<ul class="mainmenu">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a> <!-- soll auch aktiv werden -->
<ul class="submenu-1">
<li><a href="#">link 2-1</a></li>
<li><a href="#">link 2-2</a>
<ul class="submenu-2">
<li><a href="#">link 2-2-1</a></li>
<li class="active"><a href="#">link 2-2-2</a></li> <!-- aktiv -->
<li><a href="#">link 2-2-3</a></li>
</ul>
</li>
<li><a href="#">link 2-3</a></li>
</ul>
</li>
<li><a href="#">link 3</a></li>
</ul>


ich habs so versucht, aber geht net:
if ($('.submenu-2 li').hasClass('active')) {
$(this).parent().addClass('active');
}


jemand ne idee oder nen tip was daran falsch ist?
02.08.2013
GioCece 152 1 6
2 Antworten
1
Ich sehe da zwei Probleme:

1. Ist $(this) der falsche Kontext, an dieser Stelle ist this = window. Es müsste also
$('.submenu-2 li').parent().addClass('active'); heißen.
2. parent() liefert den direkten Eltern-Knoten, hier also <ul class="submenu-2">

Ich würde das so lösen:
var submenu = $('.submenu-2 li.active');
if (submenu.length > 0) {
submenu.parents('.submenu-1 li').addClass('active');
}


parents(selector) liefert alle Eltern-Knoten zurück (auf die der selector passt).
03.08.2013
phg 1,6k 3
Danke! der lösungsweg hat geklappt und ich habs verstanden.

mfg GioCece
GioCece 05.08.2013
0
Hätte dach noch eine Frage... jeder Navigationspunkt und dessen Untermenüpunkt bekommt seine eigene Hintergrundfarbe. Ih konnte meine abfragen nun soweit steuern das dies soweit gut klappt. Das bezieht sich aber nur auf die Aktiven elemente.

Wenn ich aber über die andren Links hover bekommen diese den letzten stand vererbt.

bsp vorgaben:
link 1 = hintergrund von ihm ist grün und dessen submenu auch
link 2 = hintergrund von ihm ist gelb und dessen submenu auch
link 3 = hintergrund von ihm ist magenta und dessen submenu auch

scenario:
Ich klicke auf Link 1 und dessen Hintergrund ist Grün und dessen Submenu ebenso. Perfekt!
Nun Hover ich über Link 2 und 3 und dessen Hintergrundfarbe ist auch Grün. Nicht Perfekt!

Ich klicke auf Link 2 und dessen Hintergrund ist Gelb und dessen Submenu ebenso. Perfekt!
Nun Hover ich über Link 1 und 3 und dessen Hintergrundfarbe ist auch Gelb. Nicht Perfekt!

u.s.w.

Meine Überlegung war da ja nicht jeder hauptlink eine eindeutige id hat und ich auch keine zuweisen will, dass ich durch auslesen des Textes vom Link die Passenden Farben zuweise.

1 Lösungsversuch:
if($("ul.mainmenu li a:contains(link 1)")) {
$(this).find('.submenu-1').css("background","red");
$(this).find('.submenu-2').css("background","red");
}


Das funktioniert zwar, aber: Es wird auf die anderen Submenus übertragen und alles ist rot -.-

2 Lösungsversuch:
if($("ul.mainmenu li a:contains(link 1)")) {
$(this).nextAll('.submenu-1').css("background","red");
$(this).nextAll('.submenu-2').css("background","red");
}


Hier pasiert einfach nichts ^^

ne idee warum?



mfg GioCece
05.08.2013
GioCece 152 1 6
1. Du verwendest wieder $(this).find/nextAll und das ist hier wohl wieder window statt das gewünschte $('.submenu-1')

2. Kannst du mal den Vollständigen Code auf http://jsfiddle.net/ einstellen und den Link hier posten?

3. Ich finde es unsauber das Layout über den Inhalt zuzuweisen. Wenn sich ein Link-Text ändert muss der JS-Code angepasst werden... Sofern die Person die den Link-Text ändern daran denkt.
phg 05.08.2013
ok, mach ich.
GioCece 05.08.2013
entschuldige das ich nicht geantwortet hatte, des war irgendwie zu schwierig das alles ins jsfiddle einzubauen. am ende hatte ich doch kleinbei gegeben und die entsprechenden stellen mit id's und klassen versehen. somit konnte ich alles sauber ansteuern. Trotzdem Vielen Dank nochmal.
GioCece 23.08.2013
Dann hast es ja doch sauber gelöst ;)
phg 23.08.2013
Einfacher geht es mit
.children("A").children(".submenu-1")
Floyd 24.08.2013

Stelle deine Javascript-Frage jetzt!