zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Erklärungshilfe zu JS benötigt: find ('> ul')

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.05.2016, 16:53
Benutzerbild von Krischu
"Validier erst mal"-Sager
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.08.2006
Beiträge: 323
Krischu befindet sich auf einem aufstrebenden Ast
Standard Erklärungshilfe zu JS benötigt: find ('> ul')

Kann mir jemand den nachstehenden Code erklären?
Ich finde z.B. die Klassendefinition sf-sub-indicator und icon-angle-down in keinem der angezogenen CSS files.

(sf deutet auf das - zuletzt in Verruf geratene - "SuperFish" Paket hin)

Code:
////append dropdown indicators / give classes
	$j('#mobile-menu .container ul li').each(function(){
		if($j(this).find('> ul').length > 0) {
			 $j(this).addClass('has-ul');
			 $j(this).find('> a').append('<span class="sf-sub-indicator"><i class="icon-angle-down"></i></span>');
		}
	});
Was bedeuten insbesondere das find('> ul')?

Und der Konstrukt

$j('#mobile-menu .container ul li')

Wird da eine Funktion definiert für den Fall, daß der Selektor in () vorliegt?

Was bedeutet .each( .... )?

Will's nur verstehen, ehe ich daran schraube.


--
Christoph
__________________
--
Viele Grüße
Christoph
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.05.2016, 17:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Das ist jQuery, das populärste javascript-framework.

Das "> ul" ist ein CSS-Befehl, du selektierst damit alle direkten UL, so wie im CSS. genauso wie in $j('#mobile-menu .container ul li'), damit selektierst du in JS die Elemente "'#mobile-menu .container ul li", wie im CSS. das each wirkt dann auf jedes Element (jedes li-Element von denen)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.05.2016, 11:06
Benutzerbild von Krischu
"Validier erst mal"-Sager
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.08.2006
Beiträge: 323
Krischu befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Das ist jQuery, das populärste javascript-framework.
Das "> ul" ist ein CSS-Befehl, du selektierst damit alle direkten UL, so wie im CSS. genauso wie in $j('#mobile-menu .container ul li'), damit selektierst du in JS die Elemente "'#mobile-menu .container ul li", wie im CSS. das each wirkt dann auf jedes Element (jedes li-Element von denen)

Hier noch mal etwas mehr von dem Code:

Code:
	
	function SFArrows(){

		//set height of dropdown arrow
		$j('.sf-sub-indicator').css('height',$j('a.sf-with-ul').height());
	}
	
	SFArrows();
	
	//responsive nav
	$j('body').on('click','#toggle-nav',function(){
		
		$j('#mobile-menu').stop(true,true).slideToggle(500);
		return false;
	});
	
	////append dropdown indicators / give classes
	$j('#mobile-menu .container ul li').each(function(){
		if($j(this).find('> ul').length > 0) {
			 $j(this).addClass('has-ul');
			 $j(this).find('> a').append('<span class="sf-sub-indicator"><i class="icon-angle-down"></i> HELLO </span>');
		}
	});
	
	////events
	$j('#mobile-menu .container ul li:has(">ul") > a').click(function(){
		$j(this).parent().toggleClass('open');
		$j(this).parent().find('> ul').stop(true,true).slideToggle();
		return false;
	});

Danke. Habe die JQuery Doc angeschaut und nachgelesen, was find() macht.

Habe das Problem, daß die ganzen sf-Klassen scheinbar nicht gefunden werden. Auch dieses icon "angle-down" erscheint nicht.
Das Framework ist das bizstream und die Site wurde unter WP erstellt, ich habe sie aber in ein anderes CMS importiert.

Habe jetzt mal da ein HELLO reingeschrieben und in meinen CSS file
zwecks Test eingetragen (damit ich mal eine Wirkung sehe):

Code:
.li .menu-item-has-children { border-width: 10px; border-color: green; background-color: red; }
.icon-angle-down i { background-color: green; width: 10px ; height: 10px; }
.sf-sub-indicator { text-decoration: underline; }
Die text-decoration greift.


Ziel wäre es, an Stelle des HELLO ein Icon hinzupflanzen, dem die URL des Knoten hinterlegt wird.

Ist hier der richtige Platz für eine derartige Diskussion?


Grüße
Christoph
__________________
--
Viele Grüße
Christoph

Geändert von Krischu (20.05.2016 um 11:10 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 20.05.2016, 11:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Wenn du das Element im HTML mit dem Webinspector untersuchst, was hat es dann für Eigenschaften? Welche sollte es haben,d amit der von dir gewünschte Pfeil dargestellt wird?
Was ich damit sagen will: Du hast keinerlei CSS Definition für die Klasse icon-angle-down, sondern nur für i-Element innerhalb der Klasse icon-angle-down, davon finden sich aber keine in deinem Code. Du musst also dein CSS so anpassen, dass es auch auf dein Element greift. Und nein, .sf-sub-indicator ist nicht das selbe wie .icon-angle-down, was wiederum was ganz anderes als .icon-angle-down i ist.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.05.2016, 12:09
Benutzerbild von Krischu
"Validier erst mal"-Sager
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.08.2006
Beiträge: 323
Krischu befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Wenn du das Element im HTML mit dem Webinspector untersuchst, was hat es dann für Eigenschaften? Welche sollte es haben,d amit der von dir gewünschte Pfeil dargestellt wird?
Was ich damit sagen will: Du hast keinerlei CSS Definition für die Klasse icon-angle-down, sondern nur für i-Element innerhalb der Klasse icon-angle-down, davon finden sich aber keine in deinem Code. Du musst also dein CSS so anpassen, dass es auch auf dein Element greift. Und nein, .sf-sub-indicator ist nicht das selbe wie .icon-angle-down, was wiederum was ganz anderes als .icon-angle-down i ist.
Ich habe jetzt folgendes gemacht:

CSS hinzugefügt (aus superfish.css entnommen):
Code:
.sf-sub-indicator {
    color: lightgray;
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			24px;
	height:			24px;
	/* text-indent: 	-999em;*/
	overflow:		hidden;
/*	background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; */ /* 8-bit indexed alpha png. IE6 gets solid image only */
}
und im JQuery code:
Code:
	
	////append dropdown indicators / give classes
	$j('#mobile-menu .container ul li').each(function(){
		if($j(this).find('> ul').length > 0) {
			 $j(this).addClass('has-ul');
			 $j(this).find('> a').append('<span class="sf-sub-indicator"><i class="fa fa-angle-double-right" style="font-size:24px"></i></span>');
		}
	});
	
	////events
	$j('#mobile-menu .container ul li:has(">ul") > a').click(function(){
		$j(this).parent().toggleClass('open');
		$j(this).parent().find('> ul').stop(true,true).slideToggle();
		return false;
	});
Was dazu führt, daß es erst mal so aussieht:


Eigentlich bin ich jetzt fast soweit. Im Moment bewirkt Klicken in der Zeile "Über uns" an beliebiger Stelle, daß das Submenu aufklappt. Mir muß es jetzt nur noch gelingen, das >> - Symbol mit der URL des Verzweigungsknotens zu hinterlegen. Wie kriege ich den (über das JQuery) in den code injiziert?


Frage: kriegt man hier in die Beiträge auch Inline-Grafiken?

--
Christoph
Angehängte Grafiken
Dateityp: png ueberuns.PNG (1,5 KB, 2x aufgerufen)
__________________
--
Viele Grüße
Christoph

Geändert von Krischu (20.05.2016 um 12:19 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 20.05.2016, 12:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Mit jQuery ist das recht einfach, du musst nur spezifieren, wo du das genau haben willst. entweder mit append anhängen, insertBefore oder insertAfter gibt es auch noch, liegt ganz in deiner Hand, wo/wie du das haben willst. Du musst nur darauf achten, dass du keinen Link IN einen Link einfügst, das klappt dann natürlich nicht Also klappen wird es schon, aber du wirst immer nur einen Link aufrufen können beim anklicken *g*
Mit Zitat antworten
  #7 (permalink)  
Alt 20.05.2016, 12:41
Benutzerbild von Krischu
"Validier erst mal"-Sager
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.08.2006
Beiträge: 323
Krischu befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Mit jQuery ist das recht einfach, du musst nur spezifieren, wo du das genau haben willst. entweder mit append anhängen, insertBefore oder insertAfter gibt es auch noch, liegt ganz in deiner Hand, wo/wie du das haben willst. Du musst nur darauf achten, dass du keinen Link IN einen Link einfügst, das klappt dann natürlich nicht Also klappen wird es schon, aber du wirst immer nur einen Link aufrufen können beim anklicken *g*
Danke. Im Moment sieht die .click(function()...) ja so aus:
Code:
	////events
	$j('#mobile-menu .container ul li:has(">ul") > a').click(function(){
		$j(this).parent().toggleClass('open');
		$j(this).parent().find('> ul').stop(true,true).slideToggle();
		return false;
	});
Aber wie kann ich jetzt ein spezielles click-event programmieren, das dann eben nicht das sub-menu toggelt, sondern bei click im ">>" etwas anderes tut, nämlich die URL aufrufen?

--
Grüße
Christoph
__________________
--
Viele Grüße
Christoph
Mit Zitat antworten
  #8 (permalink)  
Alt 20.05.2016, 12:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Du brauchst kein click-event programmieren, welches dir eine url öffnet, dafür musst du lediglich einen link-Tag haben, dann macht der Browser das für dich automatisch.
Mit Zitat antworten
  #9 (permalink)  
Alt 20.05.2016, 13:15
Benutzerbild von Krischu
"Validier erst mal"-Sager
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.08.2006
Beiträge: 323
Krischu befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Du brauchst kein click-event programmieren, welches dir eine url öffnet, dafür musst du lediglich einen link-Tag haben, dann macht der Browser das für dich automatisch.
Den einen Link-Tag habe ich ja schon (siehe Bild). Aber auf den ist ja die click-function programmiert.
Angehängte Grafiken
Dateityp: png webinspect.png (46,5 KB, 4x aufgerufen)
__________________
--
Viele Grüße
Christoph
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 20.05.2016, 13:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Kannst du nochmal zusammenschreiben was du genau möchtest und was du schon hast? Ich sehe nämlich bei deinem Screenshot kein >> und ich weiß ehrlich gesagt nicht genau, was du jetzt genau erreichen willst. Und bevor wir uns hier im Kreis drehenund nicht weiter kommen wäre das wohl besser, du erläuterst das nochmal
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS > Tabelle im Frame über den Rand hinaus? Stephan1958 CSS 5 04.02.2016 12:47
IE8 -> Xhtml und normale Links -> Kein Hovereffekt insanic! CSS 4 07.08.2009 21:47
Container nimmt nicht die Höhe seines Inhalts an Lestat CSS 10 04.08.2005 14:47
div -> scrollen -> balken aber nur vertikal??? bw CSS 2 12.06.2004 23:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:09 Uhr.