nicht angemeldet
DD-Elemente Gruppieren
suit
Gunnar BittersmannHallo zusammen,
ich brauch mal bitte einen Denkanstoß.
Gegeben sei eine stinknormale Definitionsliste:
<dl>
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
<dd>...</dd>
</dl>
Ich möchte jeweils die DD-Elemente gemeinsam per Javascript ansprechen können. Einschließen in einen div funktioniert nicht. Bisher bleibt nur die JS-seitige Lösung, entweder alle Elemente einzeln in einer Schleife zu durchlaufen oder eventuell anhand einer getElementByClass-Implementierung die Schleife zu vereinfachen.
Gibt es keine semantisch korrekte Möglichkeit, die DDs zu einem "Bereich" zusammenzufassen?
Gruß, Thoralf
-
Gegeben sei eine stinknormale Definitionsliste:
<dl>
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
<dd>...</dd>
</dl>> > Ich möchte jeweils die DD-Elemente gemeinsam per Javascript ansprechen können. Einschließen in einen div funktioniert nicht. Bisher bleibt nur die JS-seitige Lösung, entweder alle Elemente einzeln in einer Schleife zu durchlaufen oder eventuell anhand einer getElementByClass-Implementierung die Schleife zu vereinfachen. > Gibt es keine semantisch korrekte Möglichkeit, die DDs zu einem "Bereich" zusammenzufassen? Die <dl> Liste ist sehr unglücklich standardisiert und auch in HTML5 nicht auf dem Weg der Besserung. Während ich <dl> recht häufig verwende, vermeide ich die chaotische Freiheit und verwende pro <dt> ein einziges aber zwingend erforderliches <dd>. Ich verwende <ul> in <dd> um mehrere Alternativen zu Listen. Dein Problem ist mir zu vertraut. mfg Beat -- ><o(((°> ><o(((°> <°)))o>< ><o(((°>o Der Valigator leibt diese Fische-
Vielen Dank, Ihr zwei.
also ist es tatsächlich so gedacht und ich muss mir einen anderen Weg suchen. Die Idee mit der verschachtelten UL ist gar nicht schlecht, das werd ich mal testen und schauen, wie das aussieht, ob der Inhalt auch ohne CSS logisch bleibt.
Gruß, Thoralf
-
-
Gibt es keine semantisch korrekte Möglichkeit, die DDs zu einem "Bereich" zusammenzufassen?
XHTML 2.0 sah di als gruppierendes Element vor.
Aber die Semantik ist bereits durch die Abfolge gegeben - ein dt ist gemeinsam mit allen direkt nachfolgenden dt-Elementen für alle darauffolgenden dd-Elemente zuständig (sprich bis ein neues dt-Element kommt).
-
Hi,
Ich möchte jeweils die DD-Elemente gemeinsam per Javascript ansprechen können.
Wozu genau - was willst du mit ihnen machen?
Gibt es keine semantisch korrekte Möglichkeit, die DDs zu einem "Bereich" zusammenzufassen?
Klassen?
Wenn man die nicht im HTML stehen haben möchte, kann JavaScript da initial einmal drüberlaufen und die Klassen setzen - bspw. abhängig vom zuletzt angetroffenen DT.
Deshalb obige Frage danach, was damit vorhast. Zum anschliessenden erneuten Zugriff per JavaScript sind Klassen (noch) nicht so praktisch - aber wenn es bspw. nur um Style-Anpassungen nach Klassenzugehörigkeit geht, kann man neue Regeln für die jetzt klassifizierten Elemente auch leicht per JS mittels Nachfahrenselektor "anschalten".
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Hallo,
Ich möchte jeweils die DD-Elemente gemeinsam per Javascript ansprechen können.
Wozu genau - was willst du mit ihnen machen?die Listen sind eine Übersicht über weitere Möglichkeiten eines Angebots.
Beispiel:
(1)dt: Hochaufgelöster Print
(2)dd: mehr ...
(3)dd: Kannsu kaufen, kostet Geld1 wird immer angezeigt.
2 ist anklickbar und blendet passende 3 ein, alle anderen 3 aus.Deshalb obige Frage danach, was damit vorhast. Zum anschliessenden erneuten Zugriff per JavaScript sind Klassen (noch) nicht so praktisch - aber wenn es bspw. nur um Style-Anpassungen nach Klassenzugehörigkeit geht, kann man neue Regeln für die jetzt klassifizierten Elemente auch leicht per JS mittels Nachfahrenselektor "anschalten".
Eben wegen des "nicht so praktisch" suche ich nach besseren Möglichkeiten. suit hat recht, dass die DD eigentlich durch den zugehörigen DT korrekt einsortiert werden. Nutzt mir an der Stelle nur nichts.
Gruß, Thoralf
-
Hi,
die Listen sind eine Übersicht über weitere Möglichkeiten eines Angebots.
Beispiel:
(1)dt: Hochaufgelöster Print
(2)dd: mehr ...
(3)dd: Kannsu kaufen, kostet Geld1 wird immer angezeigt.
2 ist anklickbar und blendet passende 3 ein, alle anderen 3 aus.Irgendwie verstehe ich letzteres nicht mehr ...
Dient (2) nur dazu, einen Link darzustellen, um weitere (3) einzublenden?
Und welche (3) sind passend, welche nicht?
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Hallo,
danke für die Geduld.
Ich habe eine Liste mit mehreren Dienstleistungen.
Dabei ist DT jeweils das Element mit dem Namen der Dienstleistung.
Darunter gibt es mehrere zugehörige DD-Elemente, in denen die Dienstleistung beschrieben wird.
Das jeweils erste DD-Element ist Container für einen "mehr"-Link, mit dem die restlichen DD-Elemente, quasi die payload zum DT, ein/ausgeblendet werden. Der ganze JS-Accordion-Schnickschnack ist kein Problem.Aber ich hätte gern in valider Form:
<dl> <dt>...</dt> <dd>...</dd> <div id="ich-bin-invalide"> <dd>...</dd> <dd>...</dd> <dd>...</dd> </div> </dl>So isses vielleicht besser erklärt.
Gruß, Thoralf
-
Hi,
Das jeweils erste DD-Element ist Container für einen "mehr"-Link, mit dem die restlichen DD-Elemente, quasi die payload zum DT, ein/ausgeblendet werden.
Der Link im ersten DD ist *keine* Description des Definition Terms - also was hat er als solcher ausgezeichnet im HTML verloren?
Da das ganze eh JS-abhängig ist, sollte der Link dynamisch erstellt werden. Und dann ins sichtbare DT-Element eingehängt werden.
Gross mit CSS-Selektoren was basteln kann man hier wohl doch nicht so gut.
Deshalb würde ich beim Klick auf den Link im DT vom diesem DT ausgehend die nächsten Knoten (nextSibling) durchlaufen, und ihnen, wenn sie ein Element vom Typ DD sind, eine Klasse verpassen, die sie sichtbar macht - und das so lange, bis ich auf das nächste DT stosse, oder keine weiteren Knoten auf der Ebene mehr kommen.
Und um die vorher eingeblendeten "Unterpunkte" eines anderen DT wieder unsichtbar zu machen, analog die nachfolgenden DD von diesem DT - dessen Referenz man sich jedes mal für den nächsten Durchlauf merkt - vorher noch wieder von der Klasse befreien.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Guten Abend,
Das jeweils erste DD-Element ist Container für einen "mehr"-Link, mit dem die restlichen DD-Elemente, quasi die payload zum DT, ein/ausgeblendet werden.
Der Link im ersten DD ist *keine* Description des Definition Terms - also was hat er als solcher ausgezeichnet im HTML verloren?
Hm, seh ich ein wenig anders, bin da aber nicht sicher. Werd den also ins DT mit hineinnehmen
Da das ganze eh JS-abhängig ist, sollte der Link dynamisch erstellt werden. Und dann ins sichtbare DT-Element eingehängt werden.
Das wiederum werde ich nicht tun, da das ganze auch ohne JS funktionieren wird. Ohne JS wird die gleiche Seite mit entsprechendem Parameter aufgerufen und das CSS dann serverseitig inline geändert.
Deshalb würde ich beim Klick auf den Link im DT vom diesem DT ausgehend die nächsten Knoten (nextSibling) durchlaufen, und ihnen, wenn sie ein Element vom Typ DD sind, eine Klasse verpassen, die sie sichtbar macht - und das so lange, bis ich auf das nächste DT stosse, oder keine weiteren Knoten auf der Ebene mehr kommen.
Danke, damit werde ich mich mal beschäftigen. Ist eine gute Anregung für das oben schon genannete Durchlaufen per JS.
Gruß, Thoralf
-
@@ChrisB:
nuqneH
Gross mit CSS-Selektoren was basteln kann man hier wohl doch nicht so gut.
dd, dt:target~dt~dd { display: none; } dt:target~dd { display: block; }angewandt auf
<dl> <dt id="foo"><a href="#foo">foo</a></dt> <dd>foo foo</dd> <dd>foo foo foo</dd> <dt id="bar"><a href="#bar">bar</a></dt> <dd>bar bar</dd> <dd>bar bar bar</dd> <dt id="baz"><a href="#baz">baz</a></dt> <dd>baz baz</dd> <dd>baz baz baz</dd> </dl>Das Problem ist IrgendEin Browser, der mit diesen Selektoren nichts anzufangen weiß.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
-
-
-