Zugriff auf ein child-Element mit einer bestimmten Klasse

[Webwolf]

Hi Leute,

ich habe Probleme auf Elemente einer bestimmten Klasse zuzugreifen, die sich innerhalb von id-Elementen befinden.

<div id="box_1" class="box_style">  
	<div class="image"><img src="images/bild.gif" alt="" /></div>  
	<div class="attributes">  
    	<div class="name">Hallo Welt</div>  
        <div class="description">foobar</div>  
	</div>  
</div>  
<div id="box_2" class="box_style">  
	<div class="image"><img src="images/bild2.gif" alt="" /></div>  
	<div class="attributes">  
    	<div class="name">Lorem Ipsum</div>  
        <div class="description">bla bla</div>  
	</div>  
</div>

Hier soll nun mit JS auf den Inhalt (z.B. durch innerHTML) der einzelnen Elemente wie z.B. name o. description zugegriffen und verändert werden.
Den einzelnen Elementen eine ID zu verpassen, wollte ich eig. meiden.

G-/Versucht habe ich schon vieles, doch leider kam noch nichts gescheites dabei heraus.

Gefunden habe ich viele Scripts, die ALLE Elemente einer bestimmten Klasse auswählen -> nicht das, was ich hier benötige.
Was ich noch gefunden habe ist jQuery, womit ich leider noch nicht gearbeitet habe.

Ich würde mich über ein paar Antworten und Lösungsvorschläge freuen, sowohl ohne als auch mit jQuery. Danke

[Kai345]

[latex]Mae  govannen![/latex]

Hier soll nun mit JS auf den Inhalt (z.B. durch innerHTML) der einzelnen Elemente wie z.B. name o. description zugegriffen und verändert werden.
Den einzelnen Elementen eine ID zu verpassen, wollte ich eig. meiden.

G-/Versucht habe ich schon vieles, doch leider kam noch nichts gescheites dabei heraus.

Mit moderne(re)n Browsern ohnehin kein Problem:

var elem = document.querySelector('#box_1 .description') liefert beispielsweise das erste Element unterhalb box_1, das der Klasse description angehört. Sollten mehrere Elemente der Klasse vorhanden sein, ist querySelectorAll zu verwenden. Würden zwei Elemente mit der Klasse description vorhanden sein, wäre also var elem = document.querySelector('#box_1 .description')[1] das zweite Element.

Oder mit getElementsByClassName:

var root = document.getElementById('box_1');  
if (root) {  
    var zweites = root.getElementsByClassName('.description')[1];  
} 

Ansonsten haben die meisten Nachbildungen von getElementsByClassName für alte Browser, die das nicht kennen, durchaus die Möglichkeit, das Element, ab dem gesucht werden soll, als Parameter zu übergeben

Stur lächeln und winken, Männer!
Kai

[Kai345]

[latex]Mae  govannen![/latex]

Ich würde mich über ein paar Antworten und Lösungsvorschläge freuen, sowohl ohne als auch mit jQuery. Danke

Ach, noch etwas: Wenn du ohnehin jQuery für andere Dinge benutzt, dann solltest du auch dessen Möglichkeiten nutzen, dann wäre es unsinnig, die Elemente auf herkömmliche Weise zu ermitteln, genauso unsinnig, wie jQuery nur zur Ermittlung der Elemente einzubinden.

Stur lächeln und winken, Männer!
Kai

[Webwolf]

[latex]Mae  govannen![/latex]

Ich würde mich über ein paar Antworten und Lösungsvorschläge freuen, sowohl ohne als auch mit jQuery. Danke

Ach, noch etwas: Wenn du ohnehin jQuery für andere Dinge benutzt, dann solltest du auch dessen Möglichkeiten nutzen, dann wäre es unsinnig, die Elemente auf herkömmliche Weise zu ermitteln, genauso unsinnig, wie jQuery nur zur Ermittlung der Elemente einzubinden.

Stur lächeln und winken, Männer!
Kai

Danke für die schnelle(n) Antwort(en) kai.

Funktioniert einwandfrei (FF10):
document.querySelector('#'+box_id+' .description').innerHTML='Hallo Welt';

Mit jQuery werde ich wohl mal näher beschäftigen müssen.

Folgendes hat bei mir leider nicht funktioniert:

  
var root = document.getElementById(box_id);  
if (root) {  
    var zweites = root.getElementsByClassName('.description')[1];  
}  
zweites.innerHTML='Hallo Welt';

Ob das hier ein Syntaxfehler ist oder ob das am Browser liegt kann ich leider nicht sagen.
getElementsByClassName() war mir bisher unbekannt und was ich nicht nachvollziehen kann ist, worauf genau der Ausdruck
getElementsByClassName('.description')[1] überhaupt zeigt. Der Index [1] würde meiner Meinung nach auf das erste child-Elemente zeigen (wenn es denn eins geben würde).

[ChrisB]

Hi,

Folgendes hat bei mir leider nicht funktioniert:

var root = document.getElementById(box_id);
if (root) {
    var zweites = root.getElementsByClassName('.description')[1];
}
zweites.innerHTML='Hallo Welt';

>   
> Ob das hier ein Syntaxfehler ist oder ob das am Browser liegt kann ich leider nicht sagen.  
  
Der Name der Klasse ist "description", nicht ".description".  
  

> Der Index [1] würde meiner Meinung nach auf das erste child-Elemente zeigen (wenn es denn eins geben würde).  
  
Nein, auf das zweite natürlich.  
Zählung beginnt in der Programmierung so gut wie immer bei 0.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[Webwolf]

Der Name der Klasse ist "description", nicht ".description".

Das erklärt natürlich einiges, Danke.

Der Index [1] würde meiner Meinung nach auf das erste child-Elemente zeigen (wenn es denn eins geben würde).

Nein, auf das zweite natürlich.
Zählung beginnt in der Programmierung so gut wie immer bei 0.

Da hab ich wohl was übersehen, sorry.

Leider versteh ich immernoch nicht ganz den Zusammenhang.
Worauf zeigt genau der Ausdruck ?
Das Element mit der Klasse description hat keine child-Elemente.
Mit der [1] würde ich doch das zweite Element innerhalb von <div class="description"> ansprechen, oder nicht?
document.getElementById('box').getElementsByClassName('description')[1];

<div id="box">  
    <div class="image"><img src="images/bild.gif" alt="" /></div>  
    <div class="attributes">  
        <div class="name">Hallo Welt</div>  
        <div class="description">foobar</div>  
    </div>  
</div>

[Der Martin]

Hallo,

Mit der [1] würde ich doch das zweite Element innerhalb von <div class="description"> ansprechen, oder nicht?

document.getElementById('box').getElementsByClassName('description')[1];

nein, sondern das zweite[*] Element mit der Klasse "description" innerhalb des Elements mit der ID "box".

So long,
 Martin

[*] nach meiner Weltanschauung eigentlich auf das erste, mit [0] auf das nullte.

[Webwolf]

Hallo,

Mit der [1] würde ich doch das zweite Element innerhalb von <div class="description"> ansprechen, oder nicht?

document.getElementById('box').getElementsByClassName('description')[1];

nein, sondern das zweite[*] Element mit der Klasse "description" innerhalb des Elements mit der ID "box".

Das hat geholfen, danke Kai & Martin.

  
<div id="box_1" class="box_style">  
    <div class="image"><img src="images/bild.gif" alt="" /></div>  
    <div class="attributes">  
        <div class="name">Hallo Welt</div>  
        <div class="description">foobar</div>  
    </div>  
</div>  
<div id="box_2" class="box_style">  
    <div class="image"><img src="images/bild2.gif" alt="" /></div>  
    <div class="attributes">  
        <div class="name">Lorem Ipsum</div>  
        <div class="description">bla bla</div>  
    </div>  
</div>  

  
var root = document.getElementById('box_1');  
if (root) {  
    var zweites = root.getElementsByClassName('description')[0];  
}  
zweites.innerHTML='Hallo Welt';  

Funktioniert nun.

[Kai345]

[latex]Mae  govannen![/latex]

Leider versteh ich immernoch nicht ganz den Zusammenhang.
Worauf zeigt genau der Ausdruck ?
Das Element mit der Klasse description hat keine child-Elemente.
Mit der [1] würde ich doch das zweite Element innerhalb von <div class="description"> ansprechen, oder nicht?
document.getElementById('box').getElementsByClassName('description')[1];

document.getElementById('box') => div id="box"
.getElementsByClassName('description') => alle Elemente, die die Klasse description gesetzt haben und Kinder von 'box' sind
[1] => von diesen Elementen das zweite auswählen

Was mit diesem Code:

<div id="box">

<div class="image"><img src="images/bild.gif" alt="" /></div>
    <div class="attributes">
        <div class="name">Hallo Welt</div>
        <div class="description">foobar</div>
    </div>
</div>

  
allerdings nicht erfolgreich sein wird, da dort nur ein Element 'description' als Klasse hat. Hier wäre also lediglich Index [0] eine Referenz auf ein Element  
  
Stur lächeln und winken, Männer!  
Kai

-- 
It all began when I went on a tour, hoping to find some furniture  
 Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)  
[SelfHTML-Forum-Stylesheet](http://selfhtml.knrs.de/#h_stylesheet)

[Der Martin]

Hallo,

var root = document.getElementById(box_id);
if (root) {
    var zweites = root.getElementsByClassName('.description')[1];
}
zweites.innerHTML='Hallo Welt';

wie kommst du auf die Idee, dass ".description" ein gültiger Klassenname wäre? Der Punkt wird in CSS verwendet, um Klassenselektoren zu kennzeichnen, gehört aber nicht zum Klassennamen.

Ciao,
 Martin

[Kai345]

[latex]Mae  govannen![/latex]

Folgendes hat bei mir leider nicht funktioniert:

var root = document.getElementById(box_id);
if (root) {
    var zweites = root.getElementsByClassName('.description')[1];
}

Na ja, irgendein Volldepp hat da einen Punkt zu viel reingebastelt, die Klasse heißt natürlich 'description'

[code lang=javascript]getElementsByClassName('.description')[1]

  
Nein. Arrays, Element-Collections, Nodelists usw. haben in Javascript und vielen anderen Sprachen auch immer den Index 0 für das erste Element.  
  
Stur lächeln und winken, Männer!  
Kai

-- 
It all began when I went on a tour, hoping to find some furniture  
 Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)  
[SelfHTML-Forum-Stylesheet](http://selfhtml.knrs.de/#h_stylesheet)