jQuery click(function() dynamisch auf Buttons anwendbar?

[Rainerme]

Hallo und allen ein frohes neues Jahr 2015,

ich arbeite mich gerade in jQuery ein und stehe dabei vor folgender Frage.

Ich habe mehrere Formulare die je nach Bedarf geladen werden.
In jedem Formular habe ich drei Buttons.
in der aktuellen Version verwende ich auf jedem Button Javascript onclick und rufe darüber eine Funktion auf der dann bestimmte Werte die im onclick hinterlegt sind übergeben werden wie u.a. groupid und typeid.

Nun möchte ich auf onclick verzichten und dafür von jQuery die click(function() verwenden.

Da ich nun verschiedene Formulare habe die in bestimmten div-containeren eingeschlossen sind muss ich ja der jQuery click(function() bestimmmte Werte übergeben.

Gibt es eine Möglichkeit die click(function() so zu schreiben, dass sie mitbekommt zu welchem Eltern-Container die Buttons gehören wenn darauf geklickt wurde?
wenn ja, kann man dies dann auch für weitere Childs nehmen?
und wenn ja wie bekommt die function dann die bestimmten ID's geliefert wie z.B. meine groupid?

Grüße Rainer

[Camping_RIDER]

Aloha ;)

Ich stehe gerade auch vor einer Frage.

ich arbeite mich gerade in jQuery ein

Mit nativem JavaScript kennst du dich aber schon aus, oder? Das was du fragst ist bei nativen Funktionen nämlich ohne Weiteres möglich.

jQuery benutzen ohne JavaScript zu können ist wie ein Rennauto ohne Führerschein zu fahren.

Ich entschuldige mich schon im Voraus, falls meine Annahme ungerechtfertigt war. Dann frage ich mich aber - wieso jQuery für diese Aufgabe?

Grüße,

RIDER

[Rainerme]

Hallo,

die Annahme ist nicht gerade ungerechtfertigt, ich möchte mich deshalb auf jQuery konzentrieren da ich hier viele Möglichkeiten habe die ich gut gebrauchen kann.
Bestimmt kann man dies mit Javascript auch, aber mir scheint es zumindest für besser Verständlich zu sein.

Mein Frage war aber ob dies möglich ist und wenn ja wo ich hier ansetzen muss.

und wieso jQuery?
ich wollte ganz einfach wissen ob es geht und wenn ja wie, da ich bisher von dem bisschen Javascript was ich kann die herkömmliche Methode kenne um Daten an eine Funktion zu übermitteln eben die onclick variante mit Übergabe von Parametern.
Nun fragte ich mich wie das in jQuery funktioniert da sich die  click(function()
 ja nicht die Parameter aus der Nase ziehen kann

wäre schön wenn ich hierzu Infos erhalten würde.

Grüße
Rainer

[Camping_RIDER]

Aloha ;)

Mit Vanilla-Javascript würdest du der Funktion, die auf einen EventListener hört, einen Parameter e schenken, der dann automatisch mit dem ausgelösten Event-Objekt gefüllt wird. In e.target ist dann die DOM-Repräsentation des angeklickten Elements und damit auch Informationen über dessen Elternelemente abrufbar. Wahrscheinlich geht das mit jQuery ziemlich genauso.

Sagen kann ichs dir aber nicht - weil ich mich nach wie vor weigere, mich ohne guten Grund mit Frameworks und Co. abzugeben. Einen jQuery-bezogenen Rat müssen dir andere geben.

Ich warne aber vor dem Eindruck, Frameworks seien 'leichter einzusetzen'. Frameworks haben eigentlich den Sinn, erfahrenen Programmierern Arbeit abzunehmen und oft benötigte Vorgänge zu standardisieren. Ohne grundlegendes Verständnis der zugrunde liegenden Sprache sind Frameworks nicht benutzbar. Frameworks sind insbesondere keine Alternative zu den ihnen zugrunde liegenden Sprachen, sondern lediglich Ergänzungen dazu.

Grüße,

RIDER

[Rainerme]

Hallo,

laut einer Wiki Doku ist soll es eine schlechte Praxis sein die onclick Variante zu verwenden, in meinem Fall eben bei einem Button

wenn ich jedoch Werte mehrere Werte an eine Funktion übergeben muss dann muss ich das entweder über hidden Felder machen in denen ich diese Werte hinterlege, die ich dann wieder auslesen kann oder ich übergebe Sie mit onclick zur Weiterverarbeitung.
Da ich nun nach ewiger Suche im Netz nichts brauchbares gefunden habe, vermute ich das dies gar nicht möglich ist.

wenn doch so bitte ich um ein Beispiel.

Gruß Rainer

[Camping_RIDER]

Aloha ;)

laut einer Wiki Doku ist soll es eine schlechte Praxis sein die onclick Variante zu verwenden, in meinem Fall eben bei einem Button

Das kann man so pauschal nicht sagen. "onclick-Methode" könnte mehrere ganz unterschiedliche Techniken beschreiben, von denen einige, aber sicher nicht alle. inzwischen schlechge Praxis sind. Die Methode über buttonelm.addEventListener('click',function (e) {...}); ist definitiv eher best practice. Bedenke: jQuery ist ein JavaScript-Framework - und damit auch komplett in JavaScript geschrieben. jQuery tut intern also auch nix anderes...

Vielleicht noch kurz Hintergrundwissen zu den verschiedenen Methoden, in JavaScript Event-Listener zu registrieren, anlesen...

wenn ich jedoch Werte mehrere Werte an eine Funktion übergeben muss dann muss ich das entweder über hidden Felder machen in denen ich diese Werte hinterlege, die ich dann wieder auslesen kann oder ich übergebe Sie mit onclick zur Weiterverarbeitung.
Da ich nun nach ewiger Suche im Netz nichts brauchbares gefunden habe, vermute ich das dies gar nicht möglich ist.

wenn doch so bitte ich um ein Beispiel.

Ist schon möglich. Du kannst auch dem button-Element im DOM neue, eigene Eigenschaften verpassen und dann auf diese zugreifen. Beispiel für JavaScript schreib ich dir gerne, dazu sollte ich aber genauer wissen was du wo und wie brauchst - nicht, dass ich Arbeit reinstecke und wir haben aneinander vorbeigeredet. z.b.: Welche Parameter muss der Eventlistener bekommen, wo kommen die Werte her, ....

Grüße,

RIDER

[Rainerme]

Hallo Rider,

Danke für den Link den ich mir durchgelesen habe.
Dort konnte ich leider nur genau das finden was ich schon im Netz gefunden habe.
Zwar in einer anderen Funktion verpackt aber im Endeffekt läuft es auf das Gleiche hinaus.

Hier ein Beispiel was ich vorhabe, wobei ich glaube das dies heute in sehr vielen Anwendungen der Fall ist zumindest wenn es um die Zusammenarbeit mit Datenbanken geht.

In dem Beispiel geht es um eine ganz simple Aktion:

Ein Formular und einen Button.
Im Formular werden Daten eingetragen die später bei Klick auf den Button in eine Datenbank geschrieben werden müssen.
Damit das Programm , welches die Daten in die Datenbank schreibt (in diesem Fall PHP), auch weiss zu welcher ID diese Daten gehören, benötigt es bestimmte Informationen (nicht nur die eingetragenen Daten) sondern bestimmte ID's ob User-ID oder Adress-ID oder was auch immer.
Wenn es um mehrere Tabellen geht und es müssen mehrere ID's berücksichtigt werden die zur Weiterverarbeitung der Daten notwendig sind, dann benötigt die Funktion die hier durch den Button ausgelöst wird auch diese ID's .

Sofern man mit einer einzigen ID arbeitet, kann man diese auch ganz einfach als Wert bei dem Button hinterlegen.
Somit würde das mit dem addEventListener wohl  funktionieren oder aber ich würde es wie in dem Beispiel machen und dem Button einen Link verpassen und den Link dann mit den Werten erstellen, was wohl totaler Schwachsinn ist oder?

Benötigt man jedoch mehrere ID's , Informationen oder was auch immer die der Funktion mitgeteilt werden müssen (oder die sich die Funktion selbst holen kann) wie in meinem Fall so müssen diese Informationen im Formular ja irgendwo hinterlegt sein (ob im Button wie bei onclick="machWasMitDenInfos(1,2,3,4,5);" oder in hidden-Felder  ).

Damit wir nicht aneinander vorbei reden.

Meine Frage ging also dahin, kann man einem Button mehrer Werte geben die man dann via javascript oder jQuery Framework oder was auch immer auslesen kann? ja oder Nein
Wenn ja dann bitte um eine Beispiel.

Ich kenne so eine Möglichkeit nicht.

Wenn jedoch im Netz steht das eine onclick "bad practice" ist, hinterfrage ich dies ob es eine Alternative für mein Vorhaben gibt und suche danach.

. Die Werte die der Button oder eben die Hidden-Feler erhalten werden zuvor durch PHP dynamisch zugewiesen.

So wie in meinem Fall  gibt es anscheinend nur zwei Möglichkeiten wenn man mehrere Werte benötigt die schon beim Aufbau des Formulars generiert und übergeben werden müssen.
Entweder man schreibt sie in hidden-Felder oder man befüllt den Event-handler onclick

oder?

Grüße Jürgen

[Camping_RIDER]

Aloha ;)

Ein Formular und einen Button.
Im Formular werden Daten eingetragen die später bei Klick auf den Button in eine Datenbank geschrieben werden müssen.
Damit das Programm , welches die Daten in die Datenbank schreibt (in diesem Fall PHP), auch weiss zu welcher ID diese Daten gehören, benötigt es bestimmte Informationen (nicht nur die eingetragenen Daten) sondern bestimmte ID's ob User-ID oder Adress-ID oder was auch immer.
Wenn es um mehrere Tabellen geht und es müssen mehrere ID's berücksichtigt werden die zur Weiterverarbeitung der Daten notwendig sind, dann benötigt die Funktion die hier durch den Button ausgelöst wird auch diese ID's .

Okay - ein Formular und Verarbeitung durch PHP. Dann gibt es überhaupt keinen Grund, JavaScript/jQuery zu verwenden, denn dann sollten die Mittel deiner Wahl ein submit-Button und hidden fields sein - eventuell noch GET-Parameter in der Addresse, an die die Formulardaten via POST gesendert werden (also im action-Attribut des form).

Somit würde das mit dem addEventListener wohl  funktionieren oder aber ich würde es wie in dem Beispiel machen und dem Button einen Link verpassen und den Link dann mit den Werten erstellen, was wohl totaler Schwachsinn ist oder?

Ja, nicht sinnvoll.

Benötigt man jedoch mehrere ID's , Informationen oder was auch immer die der Funktion mitgeteilt werden müssen (oder die sich die Funktion selbst holen kann) wie in meinem Fall so müssen diese Informationen im Formular ja irgendwo hinterlegt sein (ob im Button wie bei onclick="machWasMitDenInfos(1,2,3,4,5);" oder in hidden-Felder  ).

Damit wir nicht aneinander vorbei reden.

Meine Frage ging also dahin, kann man einem Button mehrer Werte geben die man dann via javascript oder jQuery Framework oder was auch immer auslesen kann? ja oder Nein
Wenn ja dann bitte um eine Beispiel.

HTML5 bietet dir diese Möglichkeit sogar standardkonform direkt im HTML. In HTML5 kannst du komplett standardkonform eigene Attribute definieren. Ein eigenes Attribut data-userid kannst du dann im JavaScript über buttonelm.getAttribute('data-userid') abrufen. Das buttonelm ist in einer Klick-Funktion normalerweise über e.target oder (wenn e nicht verfügbar) über this verfügbar.

Wenn jedoch im Netz steht das eine onclick "bad practice" ist, hinterfrage ich dies ob es eine Alternative für mein Vorhaben gibt und suche danach.

Wie gesagt - entweder hast du diese Quelle missverstanden oder sie ist nicht zuverlässig.

. Die Werte die der Button oder eben die Hidden-Feler erhalten werden zuvor durch PHP dynamisch zugewiesen.

So wie in meinem Fall  gibt es anscheinend nur zwei Möglichkeiten wenn man mehrere Werte benötigt die schon beim Aufbau des Formulars generiert und übergeben werden müssen.
Entweder man schreibt sie in hidden-Felder oder man befüllt den Event-handler onclick

Wie gesagt - bei einem Formular sind hidden fields das Mittel der Wahl und ansonsten seit HTML5 data-xyz - Attribute.

Grüße,

RIDER

[Reinerme]

hallo,

Okay - ein Formular und Verarbeitung durch PHP.

nein, das hatte ich nicht geschrieben oder Du hast es missverstanden.

Ich hatte geschrieben:
Das Formular wird von PHP bereit gestellt.
Dann hatte ich geschrieben das ich eine Function habe die bei onclick etwas macht
ich hatte aber nicht geschrieben dass das Formular dann durch PHP ausgewertet wird.

Das passiert zwar aber erst im zweiten Stepp.
Zuvor wird der Button angeklickt, dann wird durch Javascript etwas ausgeführt (wobei hier Javascript schon zwingend die ganzen Parameter benötigt also User-ID, blabla-ID und und und) und wenn dass passt dann wird es später durch php in die DB geschrieben.

HTML5 bietet dir diese Möglichkeit sogar standardkonform direkt im HTML. In HTML5 kannst du komplett standardkonform eigene Attribute definieren.

Wie gesagt - entweder hast du diese Quelle missverstanden oder sie ist nicht zuverlässig.

Bis zu diesem Zeitpunkt hatte ich zuvor noch nie was über ein data- Attribut gelesen
entweder war es Zufall oder meine schlechte Google-Suche.

Wenn ich natürlich wie jetzt durch Deine Info auf ein data- Attribut hingewiesen werde dann ist es klar das ich es beim ersten Klick unter Google finde.

Dann geht es also doch.

da ich ja das data- Attribut in der Erweiterung selbst bestimmen kann und auch wohl mehrere angeben kann könnte ich somit beliebig viele Parameter durch Javascript aus dem Button bei Klick auslesen lassen.

Nun stellt sich die Frage:

Wird diese variante nun als guter Programmierstil bezeichnet und ist diese dem onclick Handler vorzuziehen ?

Ich würde das nun so machen (ich habe für Button eine css-Definition)
Unter php!

echo '<button class="button zusatzids" data-userid="'.$userid.'" data-zusatzId1="'.$zusatzId1.'" data-zusatzId2="'.$zusatzId2.'">meinbutton</button>';

unter Javascript bzw. dem jQuery Framework  könnte ich diese Attribute nun ganz leicht auslesen mit

  
$(".zusatzids").data(); // lese ich alle data- Attribute aus  
//oder mit  
$(".zusatzids").data("userid"); // erhalte ich nur die userid  

wäre diese  Vorgehensweise gegenüber der Übergabe an Parameter mit onclick

durch
Schreibweise unter php!
echo '<button class="button" onclick="meinefunction('.$userid.','.$zusatzId1.', '.$zusatzId2.' );">meinbutton</button>';

function meinefunction( userid, zusatzId1,zusatzId2)  
{  
//mach was  
}  

vorzuziehen?

Grüße

[Camping_RIDER]

Aloha ;)

da ich ja das data- Attribut in der Erweiterung selbst bestimmen kann und auch wohl mehrere angeben kann könnte ich somit beliebig viele Parameter durch Javascript aus dem Button bei Klick auslesen lassen.

Ja, richtig.

Nun stellt sich die Frage:

Wird diese variante nun als guter Programmierstil bezeichnet und ist diese dem onclick Handler vorzuziehen ?

Du schreibst schon wieder was von onclick-Handler, obwohl ich dir jetzt schon dreimal gesagt habe, dass das keine eindeutige Bezeichnung ist, sondern eine Sammelbezeichnung verschiedener Methoden. ALLES was durch einen Klick in JavaScript ausgelöst wird, ist ein onclick-Handler. Auch die jQuery-click-Funktion... Aber okay - du hast ja ein Beispiel zur Verdeutlichung mitgeliefert, also will ich mal nicht so sein ;)

Ich würde das nun so machen (ich habe für Button eine css-Definition)
Unter php!

echo '<button class="button zusatzids" data-userid="'.$userid.'" data-zusatzId1="'.$zusatzId1.'" data-zusatzId2="'.$zusatzId2.'">meinbutton</button>';

unter Javascript bzw. dem jQuery Framework  könnte ich diese Attribute nun ganz leicht auslesen mit

$(".zusatzids").data(); // lese ich alle data- Attribute aus
//oder mit
$(".zusatzids").data("userid"); // erhalte ich nur die userid

  
Bist du sicher, dass $(...).data(xyz) dir den Wert vom data-xyz - Attribut ausgibt? Wenn nicht, dann benutze besser wie in meinem Beispiel getAttribute oder - in jQuery - attr('data-xyz').  
  

> wäre diese  Vorgehensweise gegenüber der Übergabe an Parameter mit onclick  
>   
> durch  
> Schreibweise unter php!  
> `echo '<button class="button" onclick="meinefunction('.$userid.','.$zusatzId1.', '.$zusatzId2.' );">meinbutton</button>';`{:.language-php}  
>   
> ~~~javascript

function meinefunction( userid, zusatzId1,zusatzId2)  

> {  
> //mach was  
> }  
> 

vorzuziehen?

Ja. Zweiteres ist tatsächlich bad practice. Wenn du dich auf zweiteres beziehen willst, dann nenn das nicht Methode mit onclick-Handler (aus o.g. Gründen) sondern inline-Notation oder onclick-Handler im HTML oder so ähnlich...

Grüße,

RIDER

[Rainerme]

Hallo,

Bist du sicher, dass $(...).data(xyz) dir den Wert vom data-xyz - Attribut ausgibt? Wenn nicht, dann benutze besser wie in meinem Beispiel getAttribute oder - in jQuery - attr('data-xyz').

ja, zumindest laut Info aus dem Netz  muss bei der .data() Methode nicht zwingend das data- Attribut mit angegeben werden
angeblich ist dies seit der Einführung des .data() seit jQuery-Version 1.2.3 so

dagegen ist bei der Unviversalmethode .attr() das data- zwingend mit anzugeben

Ja. Zweiteres ist tatsächlich bad practice. Wenn du dich auf zweiteres beziehen willst, dann nenn das nicht Methode mit onclick-Handler (aus o.g. Gründen) sondern inline-Notation oder onclick-Handler im HTML oder so ähnlich...

ok, auch wenn ich mich immer noch falsch ausdrücke und wohl einige Dinge durcheinander bringe komme ich nun doch schon voran

Danke!!!

und viele Grüße

[Camping_RIDER]

Aloha ;)

ja, zumindest laut Info aus dem Netz  muss bei der .data() Methode nicht zwingend das data- Attribut mit angegeben werden
angeblich ist dies seit der Einführung des .data() seit jQuery-Version 1.2.3 so

dagegen ist bei der Unviversalmethode .attr() das data- zwingend mit anzugeben

Wie gesagt: ich hab (absichtlich) keine Ahnung von jQuery ;) Kann also gut sein.

ok, auch wenn ich mich immer noch falsch ausdrücke und wohl einige Dinge durcheinander bringe komme ich nun doch schon voran

Kein Problem. Passiert ;) Es sind noch keine Meister vom Himmel gefallen.

Danke!!!

Gern geschehen ;)

Grüße,

RIDER

[Rainerme]

Hallo,

ich möchte via Javascript oder dem JS-Framework jQuery Blockelemente wie DIV innerhalb eines Blockelements (<DIV>) zugreifen.

Frage:

Wie bezeichnet man das?

Laut dem was ich aktuell im Netz gefunden habe ist es ja keine richtige Eltern Kind-Knotenbeziehung oder doch?
Die Beispiele die ich fand bezogen sich meist auf

<div id="box1">  
   <p>das ist ein Child von box1</p>  
</div>

wie ist das aber bei
ein "p" Element ist doch auch wie ein DIV ein Blockelement oder?
So wäre doch im nachfolgenden Beispiel der Container mit der id=row1 und id=row2
ein Kindknoten von box1 bzw. box2 oder?

<div id="box1">  
   <div id="row1>  
   <input type="text" name="phsuessmin"/>  
   </div>  
   <div id="row2>  
   <input type="text" name="phsuessmin"/>  
   </div>  
</div>  
  
<div id="box2">  
   <div id="row1>  
    <input type="text" name="phsuessmin"/>  
   </div>  
   <div id="row2>  
   <input type="text" name="phsuessmin"/>  
   </div>  
</div>

Wenn ich mit jQuery nur nur auf die id=row1 zugreife
so würde er mit
$( "#row1 ).find( "input[name*='Suess']" ).val();
so würde er das erste input-feld mit dem name="phpsuessmin"  wahrscheinlich aus box1 finden

wenn ich dagegen
$( "#box1 ).find( "input[name*='Suess']" ).val();
so würde er sich auf box1 stürzen aber auch nur das erste gefundene ausgeben

wie kann ich nun direkt auf eine Zeile z.B. row-2 zugreifen
wenn ich nur die Zeile row-2 aus box1 ) möchte ?
(man möge mir meine bezeichnung verzeihen)

Grüße

[Camping_RIDER]

Aloha ;)

Laut dem was ich aktuell im Netz gefunden habe ist es ja keine richtige Eltern Kind-Knotenbeziehung oder doch?

Doch, ist es. Jedes html-Element a, dass innerhalb eines html-Element b steht, ist Kindelement (oder Kindknoten) von b und b ist Elternelement (bzw. -knoten) von a.

ein "p" Element ist doch auch wie ein DIV ein Blockelement oder?

Ja.

So wäre doch im nachfolgenden Beispiel der Container mit der id=row1 und id=row2
ein Kindknoten von box1 bzw. box2 oder?

<div id="box1">

<div id="row1>
   <input type="text" name="phsuessmin"/>
   </div>
   <div id="row2>
   <input type="text" name="phsuessmin"/>
   </div>
</div>

<div id="box2">
   <div id="row1>
    <input type="text" name="phsuessmin"/>
   </div>
   <div id="row2>
   <input type="text" name="phsuessmin"/>
   </div>
</div>

  
Ja, richtig. Allerdings ist dein Codeschnipsel nicht valide, da id's über ein gesamtes document hinweg eindeutig sein müssen. Hier wäre für row1,row2 statt id eher class angebracht.  
  

> Wenn ich mit jQuery nur nur auf die id=row1 zugreife  
> so würde er mit  
> $( "#row1 ).find( "input[name\*='Suess']" ).val();  
> so würde er das erste input-feld mit dem name="phpsuessmin"  wahrscheinlich aus box1 finden  
  
Unter oben genanntem Vorbehalt, ja. Vorausgesetzt die jQuery-Funktion find findet immer nur ein Element.  
  

> wenn ich dagegen  
> $( "#box1 ).find( "input[name\*='Suess']" ).val();  
> so würde er sich auf box1 stürzen aber auch nur das erste gefundene ausgeben  
  
Ja.  
  

> wie kann ich nun direkt auf eine Zeile z.B. row-2 zugreifen  
> wenn ich nur die Zeile row-2 aus box1 ) möchte ?  
  
jQuery's Kernstück, die sizzle-Selektorengine, wie inzwischen auch die Standard-Javascript-Funktion `document.querySelectorAll()`{:.language-javascript} interpretiert alle gültigen CSS-Selektoren mit und ohne Kombinatoren. Du kannst also folgendes nutzen:  
  
JavaScript: `document.querySelector('#box1 .row2')`{:.language-javascript}  
Und unter jQuery wahrscheinlich: `$('#box1 .row2')`{:.language-javascript}  
  
Ich habe hier querySelector statt querySelectorAll benutzt, da du eh ja nur ein Element willst.  
  
Grüße,  
  
RIDER  
  

-- 
Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller  
  
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[  

[Rainerme]

Hallo,

na super, jetzt komme ich der ganzen Sache schon sehr viel näher.

da ich mich wohl fachmännisch unkorrekt ausgedrückt habe habe ich noch eine Frage zu deiner Anmerkung

Ja, richtig. Allerdings ist dein Codeschnipsel nicht valide, da id's über ein gesamtes document hinweg eindeutig sein müssen. Hier wäre für row1,row2 statt id eher class angebracht.

Genau, so dachte ich das auch
Ich muss kurz meinen Gedankengang erklären damit Du mir meinen Denkfehler beschreiben kannst

da ich ja
stets immer ein Elternelement habe was eindeutig ist und zwar im gesamten geladenen HTML-Dokument, dachte ich, ich könne dann stets über dieses die Zeilen finden  auch wenn diese nicht eindeutig sind im Gesamt-Dokument. Da sie ja eindeutig im dazugehörigen Eltern-Element sind.

So wie Du es oben monierst, wäre wohl dann bei solch einer Vorgehensweise eine Deklarierung über class= besser.
Wieso? dort würde dann docj auch nur class="row1" bzw. row2 stehen
es würde dann nur so aussehen

  
  
<div class="box1">  
   <div class="row1>  
   <input type="text" name="phsuessmin"/>  
   </div>  
   <div class="row2>  
   <input type="text" name="phsuessmin"/>  
   </div>  
</div>  
  
<div class="box2">  
   <div class="row1>  
    <input type="text" name="phsuessmin"/>  
   </div>  
   <div class="row2>  
   <input type="text" name="phsuessmin"/>  
   </div>  
</div>  

Unter oben genanntem Vorbehalt, ja. Vorausgesetzt die jQuery-Funktion find findet immer nur ein Element.

das von mir, war nur ein Beispiel. Da ich mehrere Eingabefelder habe die jedoch im Mittelteil des name="*sues*" oder eben *salz* stehen haben kann ich das ganze unter jQuery mit each durchforsten.

wenn ich dazu noch den aus dem Button data-row oder data-boxid usw. mir mit übergeben lasse, kann ich nun direkt in der entsprechenden Zeile suchen, so finde ich nur das was ich brauche und muss nicht 100 Filter einbauen wie ich das bis jetzt hatte.

Da ich stets immer die gleichen Buttons verwendet ermittle ich nun (ist nun auch fast erledigt) aus welchem Eltern-Element also welcher box der Button abgefeuert wurde, ziehe mir die data- und suche so dann in den Felder

gut oder?

wie kann ich nun direkt auf eine Zeile z.B. row-2 zugreifen
wenn ich nur die Zeile row-2 aus box1 ) möchte ?

das habe ich nun so gemacht
Hoffe diese Schreibweise ist nicht zu chaotisch, aber in der ersten Testumgebung funktioniert es

  
$( "#box"+box+" div:nth-child("+row+") input[name*='Salz']" ).each(function(){  
		    var name 		= $(this).attr("name");  
			var id 			= $(this).attr("id");  
			var val 		= $(this).val();  
			alert("Button 1 in Box "+box+" mit row = "+row+" mit text "+val);  
		});  

da ich aber nun noch das Problem hatte das ich ja wissen muss von welchem Button aus geklickt wurde
da es ja nur 2 versch. Buttons gibt also Button1 und Button2 diese aber in der einen Registerkarte schon mal geladen wurden konnten und in der nächsten Registerkarte wieder geladen werden können
ermittle ich diese nun mit

Dabei habe ich nun den die Buttons als button declariert und nicht mehr als <input
wenn ich den Button ermittelt habe, übergebe ich dann die gefundenen data- Werte an die jQuery Suchfunktion mit dem each
(siehe oben) ich muss es jetzt nur noch richtig zusammensetzen aber von der Grundidee sollte es gehen oder?

  
  
$(':button').click(function(){  
       welcherbutton(this);  
    });  
  
  
function welcherbutton(btn){  
    id = $(btn).val();  
    var klasse 	= $(btn).attr('class');  
	var box 	= $(btn).attr('data-box');  
	var row 	= $(btn).attr('data-row');  
	alert("es wurde der button aus box: "+box+" und aus zeile : "+row+" geklickt mit class :"+klasse+" und id "+id)  
}  
  
  

JavaScript: document.querySelector('#box1 .row2')
Und unter jQuery wahrscheinlich: $('#box1 .row2')

so habe ich das doch fast schon oben gemacht oder?
gut es war ein  reiner Zufall  durch ewiges probieren.
aber werde mal im Netz nach Deinem Hinweis suchen damit ich es besser kapiere wie das genau funktioniert

Grüße

jtzt bin ich wieder ein wenig glücklicher :)

[Camping_RIDER]

Aloha ;)

Genau, so dachte ich das auch
Ich muss kurz meinen Gedankengang erklären damit Du mir meinen Denkfehler beschreiben kannst

da ich ja
stets immer ein Elternelement habe was eindeutig ist und zwar im gesamten geladenen HTML-Dokument, dachte ich, ich könne dann stets über dieses die Zeilen finden  auch wenn diese nicht eindeutig sind im Gesamt-Dokument. Da sie ja eindeutig im dazugehörigen Eltern-Element sind.

So wie Du es oben monierst, wäre wohl dann bei solch einer Vorgehensweise eine Deklarierung über class= besser.
Wieso? dort würde dann docj auch nur class="row1" bzw. row2 stehen

Genau. Der Unterschied ist einfach. Ein Wert für id muss immer bezogen auf das gesamte document eindeutig sein, es genügt keine Eindeutigkeit innerhalb des Elternelements. Das liegt an der Definition von id in der HTML-Spezifikation. Class hingegen ist deutlich allgemeiner und weniger restriktiv. Einerseits dürfen mehrere Elemente im document dieselbe Klasse haben (nicht aber die selbe id) und andererseits darf ein Element auch mehreren Klassen angehören (durch Leerzeichen getrennt).

es würde dann nur so aussehen

<div class="box1">
   <div class="row1>
   <input type="text" name="phsuessmin"/>
   </div>
   <div class="row2>
   <input type="text" name="phsuessmin"/>
   </div>
</div>

<div class="box2">
   <div class="row1>
    <input type="text" name="phsuessmin"/>
   </div>
   <div class="row2>
   <input type="text" name="phsuessmin"/>
   </div>
</div>

  
Nicht ganz. Die divs mit box1, box2 dürfen gerne weiter statt über class per id angesprochen werden - denn diese kommen ja im document nur genau einmal vor im Gegensatz zu row1,row2. Zumindest in diesem Beispiel würde ich sowas benutzen:  
  
~~~html
  
<div id="box1">  
   <div class="row1">  
   <input type="text" name="phsuessmin"/>  
   </div>  
   <div class="row2">  
   <input type="text" name="phsuessmin"/>  
   </div>  
</div>  
  
<div id="box2">  
   <div class="row1">  
    <input type="text" name="phsuessmin"/>  
   </div>  
   <div class="row2>  
   <input type="text" name="phsuessmin"/>  
   </div>  
</div>  

Noch besser ist aber, wie du ja letztendlich auch ähnlich benutzt:

  
<div id="box1">  
   <div>  
   <input type="text" name="phsuessmin"/>  
   </div>  
   <div>  
   <input type="text" name="phsuessmin"/>  
   </div>  
</div>  
  
<div id="box2">  
   <div>  
    <input type="text" name="phsuessmin"/>  
   </div>  
   <div>  
   <input type="text" name="phsuessmin"/>  
   </div>  
</div>  

Und Ansprache der Elemente dann über den Code, den du gepostet hast.

Unnötige Vergabe von Klassen und id's sollte im Sinne der best practice nähmlich vermieden werden. In diesem Sinne könntest du auch die inneren div's weglassen, aber ich ahne, dass das nur hier im Minimalbeispiel so ist.

Unter oben genanntem Vorbehalt, ja. Vorausgesetzt die jQuery-Funktion find findet immer nur ein Element.

das von mir, war nur ein Beispiel. Da ich mehrere Eingabefelder habe die jedoch im Mittelteil des name="*sues*" oder eben *salz* stehen haben kann ich das ganze unter jQuery mit each durchforsten.

Passt.

wenn ich dazu noch den aus dem Button data-row oder data-boxid usw. mir mit übergeben lasse, kann ich nun direkt in der entsprechenden Zeile suchen, so finde ich nur das was ich brauche und muss nicht 100 Filter einbauen wie ich das bis jetzt hatte.

Da ich stets immer die gleichen Buttons verwendet ermittle ich nun (ist nun auch fast erledigt) aus welchem Eltern-Element also welcher box der Button abgefeuert wurde, ziehe mir die data- und suche so dann in den Felder

gut oder?

Ja, ist eine legitime Möglichkeit.

Hoffe diese Schreibweise ist nicht zu chaotisch, aber in der ersten Testumgebung funktioniert es

$( "#box"+box+" div:nth-child("+row+") input[name*='Salz']" ).each(function(){
    var name = $(this).attr("name");
var id = $(this).attr("id");
var val = $(this).val();
alert("Button 1 in Box "+box+" mit row = "+row+" mit text "+val);
});

  
Sieht soweit ganz gut aus.  
  

> da ich aber nun noch das Problem hatte das ich ja wissen muss von welchem Button aus geklickt wurde  
> da es ja nur 2 versch. Buttons gibt also Button1 und Button2 diese aber in der einen Registerkarte schon mal geladen wurden konnten und in der nächsten Registerkarte wieder geladen werden können  
> ermittle ich diese nun mit  
>   
> Dabei habe ich nun den die Buttons als button declariert und nicht mehr als <input  
> wenn ich den Button ermittelt habe, übergebe ich dann die gefundenen data- Werte an die jQuery Suchfunktion mit dem each  
> (siehe oben) ich muss es jetzt nur noch richtig zusammensetzen aber von der Grundidee sollte es gehen oder?  
>   
>   
> ~~~javascript
  

>   
> $(':button').click(function(){  
>        welcherbutton(this);  
>     });  
>   
>   
> function welcherbutton(btn){  
>     id = $(btn).val();  
>     var klasse 	= $(btn).attr('class');  
> 	var box 	= $(btn).attr('data-box');  
> 	var row 	= $(btn).attr('data-row');  
> 	alert("es wurde der button aus box: "+box+" und aus zeile : "+row+" geklickt mit class :"+klasse+" und id "+id)  
> }  
>   
>   
> 

Auch das sieht legitim aus. Wobei ich :button nicht verstehe. Ein Schreibfehler? Sonst passts.

JavaScript: document.querySelector('#box1 .row2')
Und unter jQuery wahrscheinlich: $('#box1 .row2')

so habe ich das doch fast schon oben gemacht oder?

Ja, hast du.

gut es war ein  reiner Zufall  durch ewiges probieren.
aber werde mal im Netz nach Deinem Hinweis suchen damit ich es besser kapiere wie das genau funktioniert

Naja, dazu reicht unsere Dokumentation, es geht ja um CSS-Selektoren und Kombinatoren. Wenns um was anderes geht hab ich noch nicht verstanden, was du noch nicht kapierst ;)

Grüße,

RIDER

[Rainerme]

Hallo,

also es sieht jetzt wirklich schon sehr sehr gut aus,
Mein ganzer Code (zumindest die Javascript-Teile mit dem jQuery) hat sich drastisch reduziert.
Die Übergabe der data- Attribute funktioniert einwandfrei.
Die ID's zumindest die, die im Dokument öfters vorkommen bzw. vorkommen können, habe ich alle entfernt und wo ich es benötige auf class gesetzt.

Das mit dem jQuery funktioniert wirklich sehr sehr gut, wobei einige Dinge wenn es darum geht  Radio-Buttons die im HTML-Code alle disabled waren dann auf enabled zu setzen ist nicht ganz einfach, da gibt es wohl einige Dinge zu beachten, da funktioniert bei mir nur ein
removeAttr('disabled')
um sie dann wieder auf diasabled zu setzen reicht ein prop('disabled', true);

mmmhh?

die Suche mit div:nth-child("+week+") wobei week bei der ersten Zeile ja das Kindelement Nr 1 ist funktioniert bei der ersten Zeile einwandfrei.

Bei den Folgezeilen zeigt sich nun meine wohl unsaubere Strukturierung der Container Eltern <==> Kind
Dazu hätte ich noch eine Frage bzw. Zwei

wenn ich

<div id="box1> // Eltern-Element auf  
      <div>  // Kindelement 1 auf  
      </div> Kindelement 1 zu  
</div>// Eltern-Element zu

so müsste Kindelement 1 das erste child sein oder?

was ist nun in dieser Version

  
<div id="box1> // Eltern-Element auf  
      <div>  // Kindelement 1 auf  
             <div>  // gehört das nun zu Kindelement-1 und kann somit auch  
                   // als div:nth-child("1")  angesprochen werden ?  
             </div>  
             div> // wenn ja dann müsste das dann auch child("1") sein ??  
             </div>  
      </div> Kindelement 1 zu  
       <div> // das müsste dann Kindelement - 2 sein oder?  
       </div>  
</div>// Eltern-Element zu  
  

Gibt es eine Möglichkeit, ausgehend vom Elternlement Stufenweise in die Tiefe zu suchen bzw. kann man die einzelnen Ebenen direkt ansprechen?

für mich wäre vom Verständnis her das so

  
<div id="box1> // Eltern-Element auf  
      <div>  // Kindelement 1 auf  
             <div>  //das wäre schon ein Enkelelement (sorry für diese Beschreibung)  
                   //  
             </div>  
             <div> // und dies wäre dann das zweite Enkelelement  
             </div>  
      </div> Kindelement 1 zu  
       <div> // das müsste dann Kindelement - 2 sein oder?  
       </div>  
</div>// Eltern-Element zu  
  

Für mich wäre das wichtig, da ich akuell die <div id="box-1"> eindeutig im Dokument habe.

Aktuell komme ich damit noch zurecht bzw. sollte ich zurecht kommen wenn ich meine Eltern und Kindelemente richtig ordne.
Später wird jedoch in so einem Kindelement das gleich aufgebaut wie der Baum aussieht unter dem Elternelement.

Das wäre dann quasi eine Registerkarte in einem Reiter (hier box-1) einer Registerkarte.

Ich glaube spätestens da benötige ich eine weitere Zahl die meine id="box-1" zu id="box-1-1" erweitert um dann die darin enthaltenen Kindelemente sauber ansprechen zu können.

Diese Zahlenfusselei wollte ich nun eigentlich vermeiden da ich hoffte mit div:nth-child("+week+") darauf ganz gut zugreifen zu können, somit hätte ich mir einen unübersichtlichen Programmcode erspart.

Aktuell sieht es wirklich sehr sauber aus...
Hoffe nur das dies mit dem div:nth-child("+week+") so klappt wie ich mir das vorstelle

gibt es dazu eine Erweiterung zu dem :nth-child ? bzw. wie wird das im Standard.Javascript gemacht?

Grüße und Danke

[Camping_RIDER]

Aloha ;)

Das mit dem jQuery funktioniert wirklich sehr sehr gut, wobei einige Dinge wenn es darum geht  Radio-Buttons die im HTML-Code alle disabled waren dann auf enabled zu setzen ist nicht ganz einfach, da gibt es wohl einige Dinge zu beachten, da funktioniert bei mir nur ein
removeAttr('disabled')
um sie dann wieder auf diasabled zu setzen reicht ein prop('disabled', true);

mmmhh?

Kann gut sein, ja.

Dazu hätte ich noch eine Frage bzw. Zwei

für mich wäre vom Verständnis her das so

<div id="box1> // Eltern-Element auf
      <div>  // Kindelement 1 auf
             <div>  //das wäre schon ein Enkelelement (sorry für diese Beschreibung)
                   //
             </div>
             <div> // und dies wäre dann das zweite Enkelelement
             </div>
      </div> Kindelement 1 zu
       <div> // das müsste dann Kindelement - 2 sein oder?
       </div>
</div>// Eltern-Element zu

  
Ja, ist so.  
  

> Für mich wäre das wichtig, da ich akuell die <div id="box-1"> eindeutig im Dokument habe.  
>   
> Aktuell komme ich damit noch zurecht bzw. sollte ich zurecht kommen wenn ich meine Eltern und Kindelemente richtig ordne.  
> Später wird jedoch in so einem Kindelement das gleich aufgebaut wie der Baum aussieht unter dem Elternelement.  
  
Dann solltest du entweder auf class statt id setzen oder die id's pro Ebene vergeben, wie du schon angedeutet hast.  
  

> Das wäre dann quasi eine Registerkarte in einem Reiter (hier box-1) einer Registerkarte.  
>   
> Ich glaube spätestens da benötige ich eine weitere Zahl die meine id="box-1" zu id="box-1-1" erweitert um dann die darin enthaltenen Kindelemente sauber ansprechen zu können.  
  
Wie gesagt, ja, kann man so lösen.  
  

> gibt es dazu eine Erweiterung zu dem :nth-child ? bzw. wie wird das im Standard.Javascript gemacht?  
  
Standard-JS tut dasselbe. Wie schon gesagt: Bei den Selektoren wie :nth-child handelt es sich nicht um JS- oder jQuery-Syntax bzw. -Befehle, sondern um CSS-Selektoren. Dir stehen damit zur Selektion von Elementen exakt die selben Möglichkeiten zur Verfügung wie in CSS, nicht mehr und nicht weniger...  
  
Es hindert dich aber, wenn du n Ebenen von nth-child-Amweisungen brauchst, niemand daran, den Selektorstring dynamisch zusammen zu setzen. In etwa so:  
  
~~~javascript
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 ;)

Grüße,

RIDER

[Rainerme]

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.  
  

>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.  
  
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 ?  
  
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 ?  
  
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?  
  
Das ist wohl nicht ganz einfach zu verstehen, sorry!  
  
hier mal ein Beispiel:  
  
~~~html
  
  
<div id="box1> // Eltern-Element auf  
      <div>  // Kindelement 1  
             <div id=box1-1>  //  
                  <div> // Kind von Elterenelement mit id=box1-1  
                  </div>  
             </div>  
  
      </div> Kindelement 1 zu  
       <div> //  
       </div>  
</div>// Eltern-Element zu  
  

Da ich jetzt eh schon den ganzen Javascript-Code bzw. jQuery ins Reine bringe und ich auch meine Templates die ich nachlade anpasse, überdenke ich natürlich auch die Templates

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

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

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.

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

Grüße

[Rainerme]

Hallo,

var sel = '#box'+box;

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

  
wenn ich das richtig verstanden habe,  
könnte ich mit  
  
 $('#'+sel).children.length;  
  
nur verstehe ich dahingehend das Codeschnipsel nicht, da ich ja eindeutige ID's verwende wobei diese <div ID's )immer nur im Elternelement verwendet werden.  
  
Da ich jedoch in der aktuellen Version (also ohne weitere Registerkarten in einem Reiter, also einem Elternelement) nur mit einem Elternelement arbeite was dessen ID so erstellet wird ==>  
<div id="box"+groupid >  
  
somit erreiche ich eine Eindeutigkeit, falls ich dann in diesem Elternelement eine weitere Registerkarte bauen möchte was ich auch wieder mit einem sogenannten Elternelement ausstatten müsste, könnte ich das og. Beispiel anwenden....  
  
oder ich habe da gerade was total missverstanden  
  
Grüße  
  

[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

[Rainerme]

Hallo,

also mein Vorhaben nun den Aufbau der Seite umzubauen bzw. den Teil in dem das Formular mit nachladbaren Zeilen ist, scheint nicht ganz so einfach zu sein.

da ich innerhalb der Tabelle die auch nur  innerhalb eines DIV-Containers bauen wollte ist schwer.

ich muss ja innerhalb in der Tabelle Zeilen nachladen also <tr>'s und innerhalb eines <table> darf ich keinen DIV-Container haben

Und da ich via Ajax die Zeilen nachlade und auf die div-container wohl zugreifen muss weiss ich jetzt nicht was ich machen soll. Gibt es dazu eine Lösung?

Grüße

[Matthias Apsel]

Om nah hoo pez nyeetz, Rainerme!

Und da […] auf die div-container wohl zugreifen muss weiss ich jetzt nicht was ich machen soll.

Warum meinst du, auf div-container zugreifen zu müssen? Wegen der ID? - Die kann jedes beliebige Element bekommen.

Matthias

[Gunnar Bittersmann]

@@Camping_RIDER:

nuqneH

Standard-JS tut dasselbe. Wie schon gesagt: Bei den Selektoren wie :nth-child handelt es sich nicht um JS- oder jQuery-Syntax bzw. -Befehle, sondern um CSS-Selektoren. Dir stehen damit zur Selektion von Elementen exakt die selben Möglichkeiten zur Verfügung wie in CSS, nicht mehr und nicht weniger...

Doch, in jQuery gibt es Selektoren, die es in CSS nicht gibt.

Qapla'

[Camping_RIDER]

Aloha ;)

Standard-JS tut dasselbe. Wie schon gesagt: Bei den Selektoren wie :nth-child handelt es sich nicht um JS- oder jQuery-Syntax bzw. -Befehle, sondern um CSS-Selektoren. Dir stehen damit zur Selektion von Elementen exakt die selben Möglichkeiten zur Verfügung wie in CSS, nicht mehr und nicht weniger...

Doch, in jQuery gibt es Selektoren, die es in CSS nicht gibt.

ACK. Wie gesagt, von jQuery hab ich eigentlich keine Ahnung.

Grüße,

RIDER

[Rainerme]

Hallo,

gut das mit ID und class ist nun auch klar.

Werde mich also besonders bei den Zeilen auf class="row-n" beschränken

so wie ich das nun  bei ID gelesen habe muss ich dies dann wohl auch bei den <input textfeldern so machen, also wohl das id Attribut weglassen und nur noch name= verwenden.
... oder gibt es da Ausnahmen?

Grüße

[Camping_RIDER]

Aloha ;)

so wie ich das nun  bei ID gelesen habe muss ich dies dann wohl auch bei den <input textfeldern so machen, also wohl das id Attribut weglassen und nur noch name= verwenden.
... oder gibt es da Ausnahmen?

Nein, id's sind grundsätzlich document-weit eindeutig.

Grundsätzlich ist es auch best practice, nur so wenig id's wie nötig und sinnvoll zu verwenden. Das heißt jetzt nicht, dass man sie nicht verwenden soll. Man sollte sich nur jedesmal vor Verwendung einer id überlegen, ob man an dieser Stelle tatsächlich einen eindeutigen id-Zugriff realisieren muss, oder ob der Zugriff nicht auch über die id eines Elternelements realisiert werden kann.

Auch Klassennamen sollten nicht vorauseilend oder unnötig gesetzt werden.

Einerseits wird die Lesbarkeit des Codes damit deutlich verbessert. Andererseits ist HTML eine semantische Sprache, HTML-Code soll grundsätzlich der Auszeichnung des Inhalts dienen und - sofern vermeidbar - nicht für Präsentation oder JavaScript verstümmelt werden. Das ist u.a. auch der Grund, warum inline-Notation von Event-Handlern derart verpönt ist.

Das Ganze bitte nicht als Kritik verstehen, sondern vielmehr als Anmerkung / Erläuterung.

Grüße,

RIDER

[Gunnar Bittersmann]

@@Camping_RIDER:

nuqneH

Nein, id's sind grundsätzlich document-weit eindeutig.

Eindeutig deppisch. ;-)

Auch Klassennamen sollten nicht vorauseilend oder unnötig gesetzt werden.
Einerseits wird die Lesbarkeit des Codes damit deutlich verbessert.

Bei (um bei dem Beispiel zu bleiben)

<table>  
  <tr>  
    <td class="brand">Peugeot</td>  
    <td class="model">Kaffeemühle</td>  
    <td class="price">98 €</td>  
  </tr>  
  <tr>  
    <td class="brand">Kalita</td>  
    <td class="model">Kaffeemühle</td>  
    <td class="price">76 €</td>  
  </tr>  
</table>

wird die Lesbarkeit des Codes gerade durch die Klassennamen verbessert.

(Außerdem lassen sich die Klassen als Beschriftung bei responsiven Tabellen verwenden, im einfachsten Fall per td::before { content: attr(class) }.)

Andererseits ist HTML eine semantische Sprache, HTML-Code soll grundsätzlich der Auszeichnung des Inhalts dienen

Diese Hintereinanderreihung der Teilsätze mit Komma als schwacher Trennung könnte zu der Fehlinterpretation führen, mit HTML würden Inhalte semantisch ausgezeichnet werden.

Das leistet HTML gerade nicht. Jedenfalls nicht allein. Dazu bedarf es bspw. Microformats. Oder Schema.org oder Dublin Core und deren Einbettung in HTML per RDFa (Lite) oder Microdata. (Beispiel)

sofern vermeidbar - nicht für Präsentation oder JavaScript verstümmelt werden.

Unbedingt vermeidbar.

Qapla'

[Camping_RIDER]

Aloha ;)

Nein, id's sind grundsätzlich document-weit eindeutig.

Eindeutig deppisch. ;-)

Stimmt. Einer meiner Lieblingsfehler ;) Neben den einzeiligen JS-Kommentaren mit \, für die ich sonst immer Haue bekomm ;)

Auch Klassennamen sollten nicht vorauseilend oder unnötig gesetzt werden.
Einerseits wird die Lesbarkeit des Codes damit deutlich verbessert.

Bei (um bei dem Beispiel zu bleiben)

<table>

<tr>
    <td class="brand">Peugeot</td>
    <td class="model">Kaffeemühle</td>
    <td class="price">98 €</td>
  </tr>
  <tr>
    <td class="brand">Kalita</td>
    <td class="model">Kaffeemühle</td>
    <td class="price">76 €</td>
  </tr>
</table>

> wird die Lesbarkeit des Codes gerade durch die Klassennamen verbessert.  
  
Ich stimme dir vollkommen zu. Ich habe zu verallgemeinernd formuliert. Allerdings deckt meine Aussage das (wenn auch nicht deutlich genug) mit ab, da ich dein Beispiel nicht als vorauseilendes oder unnötiges Setzen von classes bezeichnen würde. Würdest du jetzt jeder td zusätzlich eine class 'cell' oder 'cell1'-'cellN' geben, hättest du das, was ich unter unnötig / vorauseilend meinte.  
  

> > Andererseits ist HTML eine semantische Sprache, HTML-Code soll grundsätzlich der Auszeichnung des Inhalts dienen  
>   
> Diese Hintereinanderreihung der Teilsätze mit Komma als schwacher Trennung könnte zu der Fehlinterpretation führen, mit HTML würden Inhalte semantisch ausgezeichnet werden.  
  
Naja, zumindest in Ansätzen ist das ja schon das, was geschieht / geschehen sollte.  
  

> Das leistet HTML gerade nicht. Jedenfalls nicht allein. Dazu bedarf es bspw. Microformats. Oder Schema.org oder Dublin Core und deren Einbettung in HTML per RDFa (Lite) oder Microdata. ([Beispiel](https://speakerdeck.com/gunnarbittersmann/css-preprocessors-for-the-best-of-both-worlds-from-the-front-2014?slide=20))  
  
Full ACK.  
  
Grüße,  
  
RIDER  
  

-- 
Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller  
  
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[  

[Gunnar Bittersmann]

@@Camping_RIDER:

nuqneH

benutze besser wie in meinem Beispiel getAttribute

Hier wäre [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset@title=dataset] zu verwenden. getAttribute() als Fallback für Browser, die dataset nicht unterstützen.

Qapla'

[Camping_RIDER]

Aloha ;)

benutze besser wie in meinem Beispiel getAttribute

Hier wäre [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset@title=dataset] zu verwenden. getAttribute() als Fallback für Browser, die dataset nicht unterstützen.

In wiefern "wäre das zu verwenden"? Imho sind beide Methoden gleichwertig, oder nicht? Mit dem kleinen Unterschied, dass getAttribute deutlich älter ist (und dadurch in mehr älteren Browsern unterstützt wird).

Mir ist die Argumentation nicht schlüssig, warum ich eine gleichwertige, neuere Methode nutzen soll, die mich allerdings eine Zeit lang nötigt, Fallbacks auf eine alte Methode einzubauen? Dann habe ich doch erst nichts erreicht.

Die Formulierung hätte hier in meinen Augen eher lauten müssen "es kann auch dataset verwendet werden".

Grüße,

RIDER

[Matthias Apsel]

Om nah hoo pez nyeetz, Camping_RIDER!

echo '<button class="button" onclick="meinefunction('.$userid.','.$zusatzId1.', '.$zusatzId2.' );">meinbutton</button>';

> Ja. [Dies] ist tatsächlich bad practice. Wenn du dich auf [dies] beziehen willst, dann nenn das nicht Methode mit onclick-Handler (aus o.g. Gründen) sondern inline-Notation oder onclick-Handler im HTML oder so ähnlich...  
  
am besten onclick-Attribut.  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Papi und Papier](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=P#papi).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Gunnar Bittersmann]

@@Reinerme:

nuqneH

echo '<button class="button zusatzids" data-userid="'.$userid.'" data-zusatzId1="'.$zusatzId1.'" data-zusatzId2="'.$zusatzId2.'">meinbutton</button>';

Warum man PHP in HTML schachteln sollte und nicht andersrum, habe ich  neulich erst aufgeschrieben.

<button class="button zusatzids" data-userid="[code lang=php]<?php echo $userid; ?>" data-zusatzId1="<?php echo $zusatzId1; ?>" data-zusatzId2="<?php echo $zusatzId2; ?>">meinbutton</button>
[/code]

oder kurz

<button class="button zusatzids" data-userid="[code lang=php]<?= $userid ?>" data-zusatzId1="<?= $zusatzId1 ?>" data-zusatzId2="<?= $zusatzId2 ?>">meinbutton</button>
[/code]

Qapla'