mehrere div container mit gleich beginnender id ansprechen

[djcampi]

hallo zusammen, ich brauche dringend eure hilfe.
ich habe mehrere div container, die mit der id "Intro" beginnen. dynamisch werden verschiedene endungen angehängt. so gibt es beispielsweise "IntroA", "IntroB","IntroC",usw.

wie ist es nun möglich, dass ich mit einem css befehl alle diese verschiedenen Intros anspreche??

Wenn ich z.b. bei windows nach allen intro dateien, die ich auf dem rechner habe suchen wollte, würde ich in das suchfeld intro* eintippen. gibt es solch eine einfache lösung nicht auch für html oder php?

vielen dank schonmal im voraus

[Hopsel]

Hi djcampi!

wie ist es nun möglich, dass ich mit einem css befehl alle diese verschiedenen Intros anspreche??

Es gibt für CSS Attributselektoren.

Wenn ich z.b. bei windows nach allen intro dateien, die ich auf dem rechner habe suchen wollte, würde ich in das suchfeld intro* eintippen. gibt es solch eine einfache lösung nicht auch für html oder php?

Wenn du Einfluss auf die Ausgabe des HTML-Codes hast, würde ich dir empfehlen, eine Klasse für die Elemente zu vergeben. Für nichtlebenswichtige Layoutverbesserungen reicht aber ein Attributselektor.

MfG H☼psel

[Beat]

ich habe mehrere div container, die mit der id "Intro" beginnen. dynamisch werden verschiedene endungen angehängt. so gibt es beispielsweise "IntroA", "IntroB","IntroC",usw.

wie ist es nun möglich, dass ich mit einem css befehl alle diese verschiedenen Intros anspreche??

http://de.selfhtml.org/css/formate/zentrale.htm#attributbedingte

mfg Beat

[djcampi]

d.h. ich kann mit *[id|=Intro] alle meine Intros ansprechen?

nun habe ich einen link und wenn man da draufklickt sollen alle Intros nicht mehr sichtbar sein. kann ich das dann so eingeben:

<a onclick="document.getElementById(*[id|=Intro]).style.visibility="hidden"">

[djcampi]

oder doch eher so?

<a onclick="document.all.style.*[id|=Intro].visibility="hidden"">

[EKKi]

Mahlzeit djcampi,

oder doch eher so?

Aus verschiedenen Gründen so schon mal *gar nicht*:

<a onclick="document.all.style.*[id|=Intro].visibility="hidden"">

1.)
Hier beginnt -^ der Attributwert und hier ender er -------^ ... das Folgende ist ungültiger Code.

2.)
"document.all" verstehen vernünftige Browser nicht - kein Wunder, ist ja auch kein Standard.

3.)
Du hast bisher von CSS gesprochen und als Themenbereich CSS gewählt - die Lösungsvorschläge bezogen sich also auch darauf. Wenn Du ein Javascript-Problem hast, dann solltest Du es auch entsprechend kennzeichnen. Alternativ solltest Du in deinem Eröffnungsbeitrag darauf hinweisen, dass Du eine Lösung für Javascript suchst.

4.)
Du solltest Dir Hopsels und Beats Beiträge (nochmals) genauer durchlesen ... insbesondere zum Thema "Klassen".

MfG,
EKKi

[Beat]

nun habe ich einen link und wenn man da draufklickt sollen alle Intros nicht mehr sichtbar sein. kann ich das dann so eingeben:
<a onclick="document.getElementById(*[id|=Intro]).style.visibility="hidden"">

das würde nach einer id="*[id|=Intro]" suchen, also nach einer ungültigen ID.

Wenn du nach einer Selektorsprache für JS suchst, dann musst du ein Framework wie JQuery verwenden.

Für deinen Zweck sind Klassen angemessen.
class="common special"

mfg Beat

[djcampi]

Für deinen Zweck sind Klassen angemessen.
class="common special"

okay, und wie greife ich auf eine classe mit "onclick" zu?

es soll irgendwie einfach nur alle mit intro beginnenden ids oder eben eine bestimmte klasse mit einem mausklick ausgeblendet werden.

[EKKi]

Mahlzeit djcampi,

Für deinen Zweck sind Klassen angemessen.
class="common special"

okay, und wie greife ich auf eine classe mit "onclick" zu?

Es ist vollkommen egal, ob Du "mit onclick" oder an einer anderen Stelle auf Elemente, die die gleiche Klasse besitzen, zugreifen willst.

Da das http://de.selfhtml.org/javascript/objekte/document.htm@title=document-Objekt leider nur die Methoden http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=getElementById(), http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_name@title=getElementsByName() sowie http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=getElementsByTagName(), nicht jedoch "getElementsByClassName()" kennt, musst Du Dir eine entsprechende Wrapper-Funktion selbst schreiben ... oder Du benutze ein Framework (wie z.B. Prototype, jQuery, mooTools o.ä.), das eine entsprechende Funktionalität beinhaltet.

MfG,
EKKi

[djcampi]

okay, und ist es möglich bei getElementsByTagName()divs anzusprechen, die einer klasse zugeordnet sind? sprich: getElementsByTagName("div.intro") z.b.?

[EKKi]

Mahlzeit djcampi,

okay, und ist es möglich bei getElementsByTagName()divs anzusprechen, die einer klasse zugeordnet sind? sprich: getElementsByTagName("div.intro") z.b.?

Nein (das könnten die von mir und Beat genannten Frameworks) - Du könntest aber z.B. Dir erstmal alle <div>s heraussuchen (lassen) und anschließend mittels einer Schleife durch diese Auflistung hindurchgehen, überprüfen, ob das jeweilige <div> der gewünschten Klasse angehört (oder ob seine ID mit der von Dir gewünschten Zeichenkombination anfängt), und im Erfolgsfall irgendwas mit dem <div> machen.

MfG,
EKKi

[Beat]

Für deinen Zweck sind Klassen angemessen.
class="common special"

okay, und wie greife ich auf eine classe mit "onclick" zu?

es soll irgendwie einfach nur alle mit intro beginnenden ids oder eben eine bestimmte klasse mit einem mausklick ausgeblendet werden.

Wenn es irgendwie einfach sein soll, dann verwende das Framework jquery, oder suche nach einer Funktion im Web, die getElementsByClass() erweitert implementiert hat.

mfg Beat

[djcampi]

Wenn es irgendwie einfach sein soll, dann verwende das Framework jquery, oder suche nach einer Funktion im Web, die getElementsByClass() erweitert implementiert hat.

ich schaue mir dieses jquery mal an, danke schonmal

[Kai345]

[latex]Mae  govannen![/latex]

es soll irgendwie einfach nur alle mit intro beginnenden ids oder eben eine bestimmte klasse mit einem mausklick ausgeblendet werden.

Wenn es irgendwie einfach sein soll, dann verwende das Framework jquery, oder suche nach einer Funktion im Web, die getElementsByClass() erweitert implementiert hat.

Abgesehen davon, daß ich jQuery und Konsorten (immer noch) für Müll halte, ist es totaler Overkill, für diese Aufgabe ein solches Framewürg einzubinden.

getElementsByClassName() ist in den neuen Browsern nativ implementiert, ansonsten gibt es im Netz viele fertige Nachbildungen, z.B.

/**  
* getElementsByClassName(searchClass[, vnode[, tag]])  
* Elemente mit bestimmten Klassen-Namen finden  
* @param string  searchClass  Der zu suchende Klassenname  
* @param node    vnode        Node, dessen Kinder durchsucht werden sollen (default: document)  
* @param string  tag          Tag-Name, auf die die Suche beschränkt werden soll (default: alle)  
* @return array               Array mit passenden Nodes  
*/  
  
if (typeof getElementsByClassName !== 'function') {  
	function getElementsByClassName(searchClass, vnode, tag) {  
		if (!document.getElementById || !document.getElementsByTagName || typeof searchClass !== 'string') {  
			return [];  
		}  
		if (vnode && typeof vnode === 'string') {  
			vnode = document.getElementById(vnode);  
		}  
		vnode = (vnode && typeof vnode === 'object' && vnode.nodeType === 1) ? vnode : document;  
		tag = (tag && typeof tag === 'string') ? tag : "*";  
		var classElements = [];  
		var els = vnode.getElementsByTagName(tag);  
		var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)", "gi");  
		var i = els.length;  
		/* Workaround für die 5er-IEs, die getElementsByTagName("*") nicht können */  
		if (document.all && !document.compatMode && tag === "*" && i === 0) {  
			els = vnode.all;  
			i = els.length;  
		}  
		while (i--) {  
			if (pattern.test(els[i].className)) {  
				classElements.unshift(els[i]);  
			}  
		}  
		return classElements;  
	}  
}

Cü,

Kai

[djcampi]

getElementsByClassName() ist in den neuen Browsern nativ implementiert, ansonsten gibt es im Netz viele fertige Nachbildungen, z.B.

das hört sich gut an :-)
und das kann ich dann z.b. so umsetzen?:
<a onclick="document.getElementsByClassName(intro).style.visibility='hidden';">

[Kai345]

[latex]Mae  govannen![/latex]

getElementsByClassName() ist in den neuen Browsern nativ implementiert, ansonsten gibt es im Netz viele fertige Nachbildungen, z.B.

das hört sich gut an :-)
und das kann ich dann z.b. so umsetzen?:
<a onclick="document.getElementsByClassName(intro).style.visibility='hidden';">

Nein. getElementsByClassName gibt eine NodeList (bzw. in der von mir geposteten Nachbildung ein Array) zurück. getElement_s_, also Mehrzahl.

Das heißt, diese Elemente müssen dann noch selektiert werde, d.h. entweder für ein bestimmtes Element über einen Index z.B. document.getElementsByClassName("intro")[0] für das erste Element oder in einer (for/while)-Schleife abgearbeitet werden, wenn alle Elemente betroffen sind. Daher solltest du das Javascript auch aus dem onclick-Attribut rausnehmen  und in einem Script-Block als Funktion notieren, im onclick-Attribut steht dann nur noch der Funktiona-Name.

Beispiel:

function chgVisi (clas, vis) {  
  // hier ggf. Überprüfung auf sinnvolle Typen/Werte von clas und vis  
  var els = getElementsByClassName(clas),  
      l = els.length,  
      i,  
      els;  
  for (i = 0; el = els[i]; i++) {  
    el.style.visibility = vis;  
  }  
}

<a ... onclick="chgVisi('intro', 'hidden')">

ungetestet.

Cü,

Kai

[djcampi]

du bist der hammer :-)

es funktioniert
vielen vielen dank

[ChrisB]

Hi,

es soll irgendwie einfach nur alle mit intro beginnenden ids oder eben eine bestimmte klasse mit einem mausklick ausgeblendet werden.

Wenn es irgendwie einfach sein soll, dann verwende das Framework jquery, oder suche nach einer Funktion im Web, die getElementsByClass() erweitert implementiert hat.

Oder löse die Selektion rein mit CSS, in dem du eine Regel mit Nachfahrenselektor anlegst; und dann mit JS einem übergeordneten Element eine zusätzliche Klasse verpasst, die den Nachfahrenselektor wirksam werden lässt.

MfG ChrisB