Frage zu Eltern/Kind Blockelemente

[Camping_RIDER]

Aloha ;)

Ich versuch mal noch n bisschen Klarheit zu verbreiten ;)

Hallo,

var sel = '#box'+box;

for (var i = 0; i <= n; i++) {
    sel += '>div:nth-child('+weeks[i]+')';
}
$(sel). ...

> >   
> > Ist natürlich nur ein Codeschnippsel, dem jegliche Funktionalität fehlt. Aber vielleicht bringt dich die Idee, den Selektorstring dynamisch zu erweitern, ja auf den richtigen Weg ;)  
>   
> das mit dem dynamisch erweiterbaren Selektorstring hört sich sehr gut an, muss nur noch genauer dahintersteigen, aber ich vermute das es auf das hinaus läuft was ich eigentlich dachte bzw. vorhatte, da ich ja Zeilen, also die Anzahl der Kindelemente stetig erweitere bis eben die Eintzagungen ins Formular abgeschlossen sind.  
  
Das dynamische hierdran ist nicht die Anzahl der Kinderelemente. Diese bekommst du ja schon durch :nth-child. Es geht hier vielmehr um die Anzahl der Ebenen.  
  
Sagen wir, du hast vier Ebenen. Ein Elternelement div#box1, darunter x Kindelemente div, darunter Enkelelemente div, darunter Urenkelelemente div  
  
Sagen wir weiter, du möchtest genau das 2. Urenkelelement aus dem 3. Enkelelement des 1. Kindelements. Dann muss dein Selektor so aussehen:  
  
#box1>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)  
  
Genau diesen Selektor erstellt der Codeschnippsel für die Werte  
  
~~~javascript
var box = 1;  
var rows = [1,3,2];  
var n = rows.length - 1; //blöderweise, da ich i <= n vorausgesetzt hatte  
// n = rows.length, falls i < n

Wie du siehst, kommt diese Methode mit exakt einer id-Vergabe (nämlich für das Element ganz oben in der Hierarchie) und komplett ohne Klassenvergabe aus. Das ist die Eleganz daran.

Dann solltest du entweder auf class statt id setzen oder die id's pro Ebene vergeben, wie du schon angedeutet hast.

Class würde mir ja nichts nützen, da in Bezug auf das Ansprechen der Elternelemente und der dazugehörigen Kindelemente muss bei mir ja ein Elternelement eh immer eindeutig sein.
Bei den Kindelemente kann ich auf Class gehen da ich ja zuvor durch selektieren des Elternelements die Eindeutigkeit in Kombination Elternelement+Kindelement  erhalten.

Oder sehe ich das falsch?
Vielleicht habe das oben mit dem Class-Vorschlag nur falsch verstanden.

Zweiteres. In Anlehnung an das obige Beispiel meinte ich damit:

div#box1 -> div.rowN (mit N = 1...x) -> div.boxN (mit N = 1...x) -> div.rowN (mit N = 1...x)

Wobei dann, wie ich oben schon festgestellt habe, die Klassen vollends unnötig werden, weil man direkt mit auf die Anzahl der Ebenen abgestimmtem Selektor arbeiten kann.

Dann, damit ich es auch richtig begreife:

Es ist also so, dass ein Elternelement nur direkte Kindelemente aufnehmen kann, bzw. besser beschrieben ==> Wenn ich auf ein Kindelement zugreifen (selektieren) möchte so muss dies in der ersten Ebene unter dem Elternelement stehen ?

Nein. Es gelten die Regeln für CSS (Cascading Stylesheets). Ich erkläre dir das unten dann nochmal genauer.

Wenn dem so ist, wie ist dass dann mit weiteren Verschachtelungen?

Beispiel:
Elterelement (Oberste-Ebene) => Kindelement (Ebene 2) =>  weiteres Kindelement unterhalb von  Ebene-2 hie also (Ebene 3)

wie spricht man das an ?

Beispiel. Wir haben ineinander verschachtelt:
div#el (Elternelement) => div.ki (Kind) => div.en (Enkel) => div.ur (Urenkel)

Schauen wir uns verschiedene Selektoren an und welche Elemente sie selektieren.

div  -> Selektiert Elternelement, Kinder, Enkel und Urenkel

Wir müssen also für genaueren Zugriff auf eine bestimmte Ebene einen Kombinator verwenden.

div div -> Selektiert alle div, die Kind eines div sind, also: Urenkel, Enkel, Kind
div div div -> Selektiert alle div, die Kind eines divs eines Kind-divs sind, also: Urenkel, Enkel
div div div div -> Selektiert dementsprechend Urenkel (aber auch Ururenkel, Urururenkel...)

Das waren alles Beispiele von Selektoren mit dem ' '-Kombinator, dem Nachfahren-Kombinator. Es gibt aber noch den direktes-Kind-Kombinator '>', den ich in meinem Codeschnipsel verwendet habe.

div>div -> Selektiert alle direkten div-Kinder eines div. Also wieder Urenkel, Enkel, Kind
div>div>div -> Wieder Urenkel, Enkel
div>div>div>div> -> Wieder nur Urenkel (aber auch Ururenkel, Urururenkel...)

Auf den ersten Blick nicht viel Unterschied. Schauen wir uns aber mal an, was passiert, wenn wir das erste div per ID exakt angeben:

#el div -> Selektiert alle div-Nachfahren von div#el, also Urenkel, Enkel, Kind
#el div div -> Selektiert alle div-Kinder eines div, das Nachfahre von #el ist, also Urenkel, Enkel
#el div div div -> Wieder nur Urenkel (aber auch Ururenkel, Urururenkel...)

Beim ' '-Kombinator also kein Unterschied. Beim '>'-Kombinator aber ein großer:

#el>div -> Selektiert alle div-Kinder von div#el, also nur Kinder
#el>div>div -> Selektiert alle div-Kinder von div-Kindern von div#el, also nur Enkel
#el>div>div>div -> Selektiert nur Urenkel (aber diesmal NICHT auch Ururenkel, Urururenkel...)

Auch Mischungen sind möglich: (wenn auch in diesem Beispiel nicht sinnvoll)

#el>div div -> Selektiert Enkel und Urenkel (und Ururenkel, Urururenkel...)
#el div>div -> Selektiert Enkel und Urenkel (und Ururenkel, Urururenkel...)

Ich hoffe, dir ist jetzt klarer, wie man über mehrere Ebenen selektiert. Wenn du EXAKT auf einer Ebene arbeiten willst (und nicht alle darunter liegenden mitselektieren willst), musst du also den '>'-Kombinator verwenden.

wenn das nicht möglich wäre, könnte man dann unter einem Kindelement ein (ich muss es mal so Laienhaft ausdrücken) ein Elternelemnt zu schaffen um dass dann eindeutig selektieren zu können um darin enthaltenen Kindelemente auch wieder ansprechen zu können?

Zum Glück ist es ja möglich ;)

Das ist wohl nicht ganz einfach zu verstehen, sorry!

Doch, ging ganz gut ;)

Da ich darin mit einem css-framework und einem grid-system arbeite habe ich alles mit <div> und den bestimmten css-Klassen aufgebaut. Ob das so gut ist? mmmhh

Kann man schon so lassen. Gerade css-frameworks haben es aus meiner Erfahrung an sich, eine ziemliche class-Suppe zu erzeugen. Das ist vielleicht, was den Quelltext angeht, nicht schick oder best-practice, aber zumindest nicht falsch. Aus meiner Sicht also kein unbedingter Handlungsbedarf.

Mein Problem war und ist... ich darf ja keine <div> Container unter einer <table> schreiben

Genau. Wäre semantisch auch nicht sinnvoll.

vielleicht wäre es aber doch besser nur den Eltern-Con´tainer als <div> zu gestalten und darin die Zeilen bzw. das Formular in einer <table> aufzubauen und Zeilen die ich nachladen muss dann innerhalb dieser Tabelle einzufügen.

Was würdest Du da empfehlen.

Entweder, wenn es sich dem Inhalt nach um tabellarische Daten handelt, komplett auf div verzichten und direkt eine <table> mit <tr> und <td> bauen, nötigenfalls auch weitere <table>'s innerhalb <td>.

Oder, wenn die Daten dem Inhalt nach nicht tabellarischen Charakters sind und nur eine Tabellenartige Darstellung erzeugt werden soll, kannst du <div>'s nehmen und diese per CSS auf display:table, display:table-row, display:table-cell formatieren (weitere Möglichkeiten <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=in der alten Doku> nachzulesen, die neue ist da imho noch unvollständig).

Die Wahl des html-Elements sollte sich grundsätzlich nach der Charakteristik des Inhalts richten. Es gibt heutzutage aufgrund der Möglichkeiten von CSS keinen Grund mehr, HTML-Elemente aufgrund ihrer Darstellung für nicht-passenden Inhalt zu missbrauchen (z.B. nicht-tabellarischer Inhalt innerhalb <table>).

Ich möchte eben das auch der HTML-code einigermaßen sauebr und übersichtlich ist sowie aktuell nun mein Javascript-Code aussieht

Wünschenswert ;)

Grüße,

RIDER