Zugriff auf Element durch Attribut eines Kindelements
Knight
- javascript
Hallo,
Ich habe eine kleines Problem. Und zwar will ich im Code
[code lang=html]
<div id="myDiv">
<div id="a3b2h43j75k" class="myClass">
<img src="bild1" alt="bild1" />
</div>
<div id="jd83jd83hd9s" class="myClass">
<img src="bild2" alt="bild2" />
</div>
<div id="jlksjf03kl9" class="myClass">
<img src="bild3" alt="bild3" />
</div>
<div id="ah4h6wu27uj" class="myClass">
<img src="bild4" alt="bild4" />
</div>
<div id="öakjsjf57mns" class="myClass">
<img src="bild5" alt="bild5" />
</div>
</div>
[code]
durch JavaScript ein bestimmtes Bild durch sein Attribute (src oder alt) ansprechen und das Mutterelement (also die darüberliegenden Div's) dieses Bildes auf style="display: none;" setzten. Wie schaffe ich das? Ich hab schon einige document.getElementsByAttribute() Emulator ausprobiert, funktioniert aber nicht.
WICHTIG: Die ID der Div's ist variabel und nicht fest!
Mahlzeit Knight,
Ich habe eine kleines Problem. Und zwar will ich im Code
... Verbesserungen vornehmen - z.B. will Deine *LISTE* von Bildern wahrscheinlich am liebsten eine http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=Liste sein.
durch JavaScript ein bestimmtes Bild durch sein Attribute (src oder alt) ansprechen und das Mutterelement (also die darüberliegenden Div's) dieses Bildes auf style="display: none;" setzten. Wie schaffe ich das?
Indem Du z.B. mittels einer Schleife über <http://de.selfhtml.org/javascript/objekte/images.htm@title=alle Bilder des Dokuments> iterierst und jeweils überprüfst, ob sich das aktuelle Bild <http://de.selfhtml.org/javascript/objekte/node.htm#parent_node@title=innerhalb der von Dir gewünschten Struktur> befindet und ob sein http://de.selfhtml.org/javascript/objekte/images.htm#src@title=src-Attribut den von Dir gewünschten Kriterien entspricht.
Ich hab schon einige document.getElementsByAttribute() Emulator ausprobiert, funktioniert aber nicht.
"Emulator"? Woher hast Du eine solche Methode? Im Javascript-Standard ist sie jedenfalls nicht enthalten.
MfG,
EKKi
Hallo EKKi
... Verbesserungen vornehmen - z.B. will Deine *LISTE* von Bildern wahrscheinlich am liebsten eine http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=Liste sein.
Sry, Liste war falsch. Ist mir grad als einziges eingefallen.
durch JavaScript ein bestimmtes Bild durch sein Attribute (src oder alt) ansprechen und das Mutterelement (also die darüberliegenden Div's) dieses Bildes auf style="display: none;" setzten. Wie schaffe ich das?
Indem Du z.B. mittels einer Schleife über <http://de.selfhtml.org/javascript/objekte/images.htm@title=alle Bilder des Dokuments> iterierst und jeweils überprüfst, ob sich das aktuelle Bild <http://de.selfhtml.org/javascript/objekte/node.htm#parent_node@title=innerhalb der von Dir gewünschten Struktur> befindet und ob sein http://de.selfhtml.org/javascript/objekte/images.htm#src@title=src-Attribut den von Dir gewünschten Kriterien entspricht.
Danke! Genau das habe ich gesucht.
Ich hab schon einige document.getElementsByAttribute() Emulator ausprobiert, funktioniert aber nicht.
"Emulator"? Woher hast Du eine solche Methode? Im Javascript-Standard ist sie jedenfalls nicht enthalten.
Nein, ich habe sie emuliert, damit meine ich eine solche Funktion überhaupt erst gemacht habe.
MfG,
Knight
Entschuldigung für doppelpost, aber könntest du mir ein kleines Beispiel machen? (oder auch jemand anders)
Danke
Knight
Hi,
Entschuldigung für doppelpost, aber könntest du mir ein kleines Beispiel machen? (oder auch jemand anders)
„Kleines Beispiel“ hast du bekommen - als verbale Beschreibung dessen, was zu tun ist.
Wenn du mit der Umsetzung Probleme hast - dann zeig her, wie du diese versucht hast.
MfG ChrisB
Hi,
»»
„Kleines Beispiel“ hast du bekommen - als verbale Beschreibung dessen, was zu tun ist.
Wenn du mit der Umsetzung Probleme hast - dann zeig her, wie du diese versucht hast.
Hmmm. Vielleicht hätte ich im Posting sagen sollen, dass ich ein Anfänger bin. Ich arbeite zwar hin und wieder mit JavaScript, aber da ich Schleifen noch nie benötigt habe, weiß ich auch nicht wie man diese macht bzw. durch eine Schleife die img tags ausließt. Ich hätte zum auslesen aller Bilder eher an
beispielvariable = document.getElementById('myDiv').document.getElementsByTagName('img');
gedacht.
@Jürgen: Vielen Dank! Du hast mir damit sehr geholfen.
Hallo Knight,
mit
imgs_im_div = document.getElementById("myDiv").getElementsByTagName("img");
erhälst du Zugriff auf alle Bilder im div. Über
imgs_im_div[i].src
bekommst du den Zugriff auf den URL des i-ten Bildes, um ihn zu prüfen. Über
imgs_im_div[i].parentNode
kommst du dann an den Elternknoten des i-ten Bildes und kannst seine style-Eigenschaften ändern.
Das ist jetzt nicht geprüft, auch Tippfehler sind möglich. Sieh die daher die Verwendeten Methoden und ihre Schreibweise in der http://de.selfhtml.org/javascript/objekte/document.htm@title=Doku an.
Gruß, Jürgen
Hallo selfHTML,
ich muss mal wieder stören. Ich habe das jetzt alles soweit hinbekommen. Leider habe ich das folgende Problem:
Die Anzahl der Bilder ist immer Unterschiedlich. Das heißt es gibt 0-500 Bilder. Mit diesem Code müsste ich jedes Bild einzelnd rauspicken:
getIMG = document.getElementById("bag").getElementsByTagName("img");
function removebereich1() {
if(getIMG[0]) {
if(getIMG[0].src = 'images/bereich1/bild1.png') {
var test = getIMG[0].parentNode;
test.style = 'display: none;';
}
}
}
/*Den Code hab ich selbst noch nicht getestet*/
Da es etwa 7 mal 50 verschiedene Bilder gibt, wär das Ansprechen damit ziemlich mühsam.
Gibt es nun eine Möglichkeit den Mutterelementen aller Bilder, die eine bestimmte Quelle haben, eine ID oder Class zuzuweisen? Es wäre halt nur schlecht, wenn ich jedes Bild einzeln ansprechen muss.
Gruß
Knight
Hi,
Leider habe ich das folgende Problem:
Die Anzahl der Bilder ist immer Unterschiedlich. Das heißt es gibt 0-500 Bilder. Mit diesem Code müsste ich jedes Bild einzelnd rauspicken:
Das man für Aktionen, die man mehrmals mit wechselnden Parametern ausführen möchte, Schleifen benutzt, wurde dir ja bereits gesagt.
Also wird's vielleicht langsam mal Zeit, dass du dich darüber informierst.
Gibt es nun eine Möglichkeit den Mutterelementen aller Bilder, die eine bestimmte Quelle haben, eine ID oder Class zuzuweisen? Es wäre halt nur schlecht, wenn ich jedes Bild einzeln ansprechen muss.
Dann spreche sie alle an - in einer Schleife.
MfG ChrisB
Hallo ChrisB,
ist es also so möglich:
getIMG = document.getElementById("bag").getElementsByTagName("img");
function remove() {
for (var i = 1; i <= getIMG; i++)
if(getIMG[i]) {
if(getIMG[i].src = 'images/bereich1/bild1.png') {
var bild1 = getIMG[i].parentNode;
bild1.style = 'display: none;';
}
}
}
Eine Frage die mir jetzt noch offen bleibt, ist ob getIMG als Zahl definiert ist oder sind alle img tags darin gespeichert?
Gruß
Knight
Mahlzeit Knight,
Eine Frage die mir jetzt noch offen bleibt, ist ob getIMG als Zahl definiert ist oder sind alle img tags darin gespeichert?
Das kann http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=SELFHTML Dir beantworten ...
MfG,
EKKi
Hallo EKKi,
Das kann http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=SELFHTML Dir beantworten ...
Hmmpf, wenn ich das richtig verstehe werden also alle img-tags gesammelt. Das ist schlecht. Gibt es eine Möglichkeit die zu zählen?
MfG
Knight
Hallo Knight,
Gibt es eine Möglichkeit die zu zählen?
Ja. Nach den Grundlagen von Javascript solltest du dich mal mit Arrays und deren Länge (length) beschäftigen. Übrigens: wie fast alle Sprachen zählt auch Javascript die Elemente eines Arrays oder einer Collection von 0 bis length-1.
Gruß, Jürgen
Hallo Jürgen,
nochmal Danke. Jetzt habe ich es hinbekommen. Falls es noch Probleme gibt, melde ich mich.
MfG
Knight
Hallo Allerseits,
nochmal Danke. Jetzt habe ich es hinbekommen. Falls es noch Probleme gibt, melde ich mich.
Hier ist die Meldung. Mir ist einerseits ein Fehler aufgefallen und andererseits funktioniert es noch nicht ganz:
function remove() {
for (var i = 1; i <= getIMG.length; i++)
if(getIMG[i]) {
if(getIMG[i].src == 'images/bereich1/bild1.png') {
var beispielvar = getIMG[i].parentNode;
beispielvar.setAttribute('style', 'display: none;');
}
}
}
function if_window_visible() {
if(document.getElementById('bag')) {
getIMG = document.getElementById("bag").getElementsByTagName("img");
removeWeapons();
}
}
window.setInterval('if_window_visible()', 1);
Der Fehler der mir aufgefallen ist: Bei "if(getIMG[i].src == 'images/bereich1/bild1.png')" wird geprüft ob eines der Bilder, die im Array sind, die gewünschte Quelle hat. Soweit, so gut, aber danach bei "var beispielvar = getIMG[i].parentNode;" wird ja trotzdem von jedem Bild, dass in der Variable i im Moment ist, das Elternelement genommen. Das heißt doch, dass theoretisch in der variable beispielvar jetzt alle Elternknoten sind. Ist das wirklich so? Eigentliches Ziel ist es ja, nur das Elternelement des Bildes der darüberstehenden if-Anweisung zu nehmen.
Weiterer Fehler: Ich habe als Erstes aus Versehen in der if-Anweisung "if(getIMG[i].src == 'images/bereich1/bild1.png')" ein Ungleich gemacht, anstatt ein gleich-gleich. Mit dem Ungleich hat alles funktioniert (d.h. das alles auf "display: none;" gesetzt wurde was eben NICHT diese Quelle hat. Jetzt habe ich das != zu == geändert und - es funktioniert nichtmehr. Kann mir jemand die Lösung sagen?
MfG
Knight
Hallo Knight,
function remove() {
for (var i = 1; i <= getIMG.length; i++)
du musst die Schleife von 0 bis length-1 laufen lassen. Hast du schon mal einen Blick in die Fehlerkonsole geworfen?
if(getIMG[i]) {
if(getIMG[i].src == 'images/bereich1/bild1.png') {
var beispielvar = getIMG[i].parentNode;
beispielvar.setAttribute('style', 'display: none;');
ich würde hier beispielvar.style.display = "none" schreiben.
}
}
}function if_window_visible() {
if(document.getElementById('bag')) {
getIMG = document.getElementById("bag").getElementsByTagName("img");
removeWeapons();
was macht diese Funktion und wer ruft wann und wo remove(); auf?
}
}window.setInterval('if_window_visible()', 1);
mit welchem Rechner willst du diese Funktion im Millisekundentakt abarbeiten?
den Rest habe ich nicht verstanden.
Gruß, Jürgen
Hallo,
du musst die Schleife von 0 bis length-1 laufen lassen. Hast du schon mal einen Blick in die Fehlerkonsole geworfen?
Natürlich. Das war dumm von mir.
was macht diese Funktion und wer ruft wann und wo remove(); auf?
Oh, natürlich, dass hätte ich vielleicht erklären sollen.
Es wird in der Website ein "JavaScript Fenster" geöffnet, also innerhalb der Website, kein neues Browserfenster. Dort sind die Bilder. Durch diese Funktion teste ich, ob das Fenster geöffnet ist. Im Endeffekt wird diese Funktion dazu nützen, einen Button zu erstellen, was aber erst geht, wenn das Element da ist ;)
window.setInterval('if_window_visible()', 1);
Also in meinem Skript steht da 3000, was eine ordentliche Zeit sein sollte.
Das Variable kein Bild sondern lediglich der Zähler ist, war mir klar.
Das Philosophieren kann und werde ich gerne lassen, ich versprechs.
Ich bin gerade den Code mit Logik durchgegangen und - na endlich! Der Fehler war ja eigentlich recht klar und das src-Attribut war eigentlich schon das, was ich dachte, nur halt etwas "ausführlicher".
Danke an alle! Jetzt funktionierts und ich bin um einiges weiser geworden.
MfG
Knight
Hallo,
Nochmal ich.
Danke an alle! Jetzt funktionierts und ich bin um einiges weiser geworden.
Das stimmt nicht ganz. Weiser bin ich geworden, funktionieren ist dann noch was anderes:
function removeBereich1() {
for (var i = 0; i <= getIMG.length-1; i++)
if(getIMG[i].src == 'http://myhomepage.de/images/bereich1/bild1.png') {
var bild1 = getIMG[i].parentNode;
bild1.setAttribute('style', 'display: none;');
}
if(getIMG[i].src == 'http://myhomepage.de/images/bereich1/bild2.png') {
var bild2 = getIMG[i].parentNode;
bild2.setAttribute('style', 'display: none;');
}
/*[...]*/
}
function removeBereich2() {
for (var i = 0; i <= getIMG.length-1; i++)
if(getIMG[i].src == 'http://myhomepage.de/images/bereich2/bild1.png') {
var bild1_bereich2 = getIMG[i].parentNode;
bild1_bereich2.setAttribute('style', 'display: none;');
}
if(getIMG[i].src == 'http://myhomepage.de/images/bereich2/bild2.png') {
var bild2_bereich2 = getIMG[i].parentNode;
bild2_bereich2.setAttribute('style', 'display: none;');
}
/*[...]*/
}
function if_window_visible() {
if(document.getElementById('bag')) {
getIMG = document.getElementById("bag").getElementsByTagName("img");
removeBereich1();
removeBereich2();
}
}
window.setInterval('if_window_visible()', 3000);
Firebug Konsole Fehlermeldung:
getIMG[i] is undefined
if(getIMG[i].src == 'http://myhomepage.de/images/bereich1/bild1.png') {
Das erste Bild wird entfernt, das zweite und alle darauffolgenden nicht. Besonders durch die Fehlermeldung bin ich verwirrt und kann keinen Fehler sehen.
MfG
Knight
Hallo,
function removeBereich1() {
for (var i = 0; i <= getIMG.length-1; i++)
if(getIMG[i].src == 'http://myhomepage.de/images/bereich1/bild1.png') {
var bild1 = getIMG[i].parentNode;
bild1.setAttribute('style', 'display: none;');
}
Hier ist die Schleife bereits zu Ende: Alle Bilder sind geprüft und das gefundene (bild1) ist ausgeblendet worden. Der danach noch folgende Vergleich wird niemals `true`{:.language-javascript}, sondern führt immer zum Fehler, weil jetzt `i==getIMG.length`{:.language-javascript} und somit `getIMG[i]==undefined`{:.language-javascript} gilt, genau wie in der Fehlermeldung beschrieben. Lies nochmal genauer nach, wie man Schleifen notiert.
Die umständliche Abbruchbedingung `i<=getIMG.length-1`{:.language-javascript} würde ich durch `i<getIMG.length`{:.language-javascript} ersetzen, du kannst aber auch `i+5<=getIMG.length-6`{:.language-javascript} nehmen ;)
Gruß, Don P
Hallo Don P,
ich habe es jetzt so notiert:
function removeBereich1() {
for (var i = 0; i <= getIMG.length-1; i++) {
if(getIMG[i].src == 'http://myhomepage.de/images/bereich1/bild1.png') {
var bild1 = getIMG[i].parentNode;
bild1.setAttribute('style', 'display: none;');
}
}
Lies nochmal genauer nach, wie man Schleifen notiert.
Habe ich getan. Aber mir fällt im Moment nichts auf.
Die umständliche Abbruchbedingung
i<=getIMG.length-1
würde ich durchi<getIMG.length
ersetzen, du kannst aber auchi+5<=getIMG.length-6
nehmen ;)
Warum ist diese Umständlich? Macht doch eigentlich kein Unterschied :)
MfG
Knight
Hallo Knight,
ich habe es jetzt so notiert:
function removeBereich1() {
for (var i = 0; i <= getIMG.length-1; i++) {
if(getIMG[i].src == 'http://myhomepage.de/images/bereich1/bild1.png') {
var bild1 = getIMG[i].parentNode;
bild1.setAttribute('style', 'display: none;');
}
}
warum probierst du nur wild rum und schaust nicht in der Fehlerkonsole nach, was da für Meldungen stehen?
Im obigen Code machst du drei Klammern auf, aber nur zwei wieder zu.
Wenn du eine Schleife so schreibst:
~~~javascript
for(i=0;i<5;i++) // 1
if(...) { x[i] = ...; ... } // 2
x[i]= ...; // 3
wird Zeile 2 5-mal durchlaufen mit den Werten i=0...4. Die Zeile 3 wird dann nur einmal mit i=5 ausgeführt. Schreibst du aber
for(i=0;i<5;i++) { // 1
if(...) { x[i] = ...; ... } // 2
x[i]= ...; // 3
}
werden beide Zeilen (2 und 3) mit i=0...4 ausgeführt.
Also: lerne mit der Fehlerkonsole umzugehen und lerne die Basics.
Gruß, Jürgen
Hallo JürgenB,
warum probierst du nur wild rum und schaust nicht in der Fehlerkonsole nach, was da für Meldungen stehen?
Im obigen Code machst du drei Klammern auf, aber nur zwei wieder zu.
Ich habe es in meinem Quelltext jetzt eh anders gemacht, den Fehler mit den Klammern habe ich nur hier beim umschreiben auf ein Beispiel gemacht.
for(i=0;i<5;i++) { // 1
if(...) { x[i] = ...; ... } // 2
x[i]= ...; // 3
}
>
> werden beide Zeilen (2 und 3) mit i=0...4 ausgeführt.
Ich habe den Quelltext jetzt auf die switch methode geändert. So wie es da steht, hatte ich es schon vorher, und trotzdem funktioniert es nicht, bzw. wird nur das erste Bild entfernt. Warum, ist jetzt die Frage. Fehlerkonsole meldet nichts, JSLint auch nicht. Ich verstehe es einfach nicht mehr.
~~~javascript
function removeBereich1() {
for (var i = 0; i <= getIMG.length-1; i++) {
switch(getIMG[i].src) {
case 'http://meinewebsite.de/images/bereich1/bild1.png':
var beispielvar_bild1_bereich1 = getIMG[i].parentNode;
beispielvar_bild1_bereich1.setAttribute('style', 'display: none;');
break;
case 'http://meinewebsite.de/images/bereich1/bild2.png':
var beispielvar_bild2_bereich1 = getIMG[i].parentNode;
beispielvar_bild2_bereich1.setAttribute('style', 'display: none;');
break;
}
}
}
function removeBereich2() {
for (var i = 0; i <= getIMG.length-1; i++) {
switch(getIMG[i].src) {
case 'http://meinewebsite.de/images/bereich2/bild1.png':
var beispielvar_bild1_bereich2 = getIMG[i].parentNode;
beispielvar_bild1_bereich2.setAttribute('style', 'display: none;');
break;
case 'http://meinewebsite.de/images/bereich2/bild2.png':
var beispielvar_bild2_bereich2 = getIMG[i].parentNode;
beispielvar_bild2_bereich2.setAttribute('style', 'display: none;');
break;
}
}
}
function if_window_visible() {
if(document.getElementById('bag')) {
getIMG = document.getElementById("bag").getElementsByTagName("img");
removeBereich1();
removeBereich2();
}
}
MfG
Knight
Hallo Knight,
ich glaube, es ist jetzt an der Zeit, dass du mal eine Testseite online stellst, damit man sich das mal live ansehen kann.
Gruß, Jürgen
Hallo Jürgen,
ich glaube, es ist jetzt an der Zeit, dass du mal eine Testseite online stellst, damit man sich das mal live ansehen kann.
Ja, würde ich gerne, aber die Testseite ist nicht von mir. Das ganze wird eine Userscript für Greasemonkey (wird aber eingebunden, und nicht in Greasemonkey definiert!)
Die Seite ist eigentlich ein Spiel mit dem Namen http://www.the-west.de/@title:TheWest). Ich will euch nicht zumuten, euch da zu registrieren.
MfG
Knight
Hallo,
Geschafft! Ich habe einen kleinen aber dennoch schweren Tippfehler gemacht.
Gruß und Danke für die Hilfe
Knight
PS: Ich hoffe das war das letzte Posting in diesem Thread.
Hi,
if(getIMG[i]) {
if(getIMG[i].src == 'images/bereich1/bild1.png') {
Weiterer Fehler: Ich habe als Erstes aus Versehen in der if-Anweisung "if(getIMG[i].src == 'images/bereich1/bild1.png')" ein Ungleich gemacht, anstatt ein gleich-gleich. Mit dem Ungleich hat alles funktioniert (d.h. das alles auf "display: none;" gesetzt wurde was eben NICHT diese Quelle hat. Jetzt habe ich das != zu == geändert und - es funktioniert nichtmehr. Kann mir jemand die Lösung sagen?
Geh das ganze jetzt bitte langsam mal mit ein bisschen Verstand und Logik an.
*Kontrolliere*, ob dein Script mit den Werten arbeitet, die du *vermutest*. (Bspw. mittels Kontrollausgaben.)
In obigem Fall wird das src-Attribut des Bildes vermutlich *nicht* das enthalten, was du glaubst.
MfG ChrisB
Mahlzeit Knight,
Der Fehler der mir aufgefallen ist: Bei "if(getIMG[i].src == 'images/bereich1/bild1.png')" wird geprüft ob eines der Bilder, die im Array sind, die gewünschte Quelle hat.
Ja, aber nicht *irgenseins*.
Soweit, so gut, aber danach bei "var beispielvar = getIMG[i].parentNode;" wird ja trotzdem von jedem Bild, dass in der Variable i im Moment ist, das Elternelement genommen.
In der Variable i ist kein Bild - diese ist lediglich ein Zähler. In der NodeListe befinden sich jedoch Bilder, deren i-tes dort gerade "bearbeitet" wird.
Das heißt doch, dass theoretisch in der variable beispielvar jetzt alle Elternknoten sind.
Nein, das heißt es in keinster Weise. Dir fehlen offenbar ganz elementare Grundlagen in bezug auf http://de.selfhtml.org/javascript/objekte/array.htm@title=Arrays, http://de.selfhtml.org/javascript/sprache/schleifen.htm#for@title=Schleifen und sogar http://de.selfhtml.org/javascript/sprache/operatoren.htm#zuweisung@title=Wertzuweisungen. Hole diese nach. Vorher ist es mehr oder sinnfrei, über Programmcode zu philosophieren.
Ist das wirklich so? Eigentliches Ziel ist es ja, nur das Elternelement des Bildes der darüberstehenden if-Anweisung zu nehmen.
Und genau das passiert auch - wie aus dem Code leicht zu ersehen ist. Denn nur wenn die Prüfung erfolgreich ist, wird die entsprechend Zuweisung ausgeführt. Und eine Zuweisung hängt nichts hinten an, sondern weist zu.
Ansonsten kann ich mich nur ChrisBs Ausführungen anschließen.
MfG,
EKKi
Hi,
Das kann http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=SELFHTML Dir beantworten ...
Hmmpf, wenn ich das richtig verstehe werden also alle img-tags gesammelt.
Ja - alle unterhalb des Elements, auf dem du die Methode aufrufst.
Das, was du von der Methode zurückbekommst, ist eine sog. NodeList -
Gibt es eine Möglichkeit die zu zählen?
MfG ChrisB