• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Query Select von Elementen mit bestimmten Ids

U

uthred

New member
Hi,

ich habe eine Web-Anwendung, welche den Inhalt automatisch generiert. Da entsehen auch doppelte Ids (Lässt sich von meiner Seite aus nicht ändern).

Wie wähle ich ein Element anhand der ID aus, abhängig von der parent id?
Folgendes habe ich probiert (auch einzeln und nicht aneinander gereiht...
Code: 
<!DOCTYPE html>
<html>
<body>

<p id="H"><p id="bla">I am  not the searched paragraph.</p><p>Blub</p></p>
<p id="E"><p id="bla">I am  not the searched paragraph.</p><p>Blub</p></p>
<p id="L"><p id="bla">I am  not the searched paragraph.</p><p>Blub</p></p>
<p id="P"><p id="bla">I am the searched paragraph.</p><p>Blub</p></p>
<p id=""><p id="bla">I am  not the searched paragraph.</p><p>Blub</p></p>
<p id="M"><p id="bla">I am  not the searched paragraph.</p><p>Blub</p></p>
<p id="E"><p id="bla">I am  not the searched paragraph.</p><p>Blub</p></p>

<p>Click the button get the HTML content of the p element.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var v = document.querySelector("#P > #bla").innerHTML;
    var w = document.querySelector("#P  #bla").innerHTML;
    var x = document.querySelector("#P").querySelector("#bla").innerHTML;
    var y = document.getElementById("P").querySelector("#bla").innerHTML;
    var z = document.getElementById("P").getElementById("bla").innerHTML;
    document.getElementById("demo").innerHTML = v+w+x+y+z;
}
</script>

</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Wenn du nicht garantieren kannst, daß eine ID eindeutig ist, dann benutz keine IDs sondern Klassen.

Dein Code sollte jede Menge Fehler werfen, denn sowohl querySelector() als auch getElementById() sind Methoden von document, nicht von Element (was nämlich genau mit diesem Problem zusammenhängt).

- - - Aktualisiert - - -

Hier würde wahrscheinlich bereits
Code: 
document.querySelector("#P p")
ausreichen.
 
Ich würde gerne auf die doppelten Ids verzichten, da es aber fremde Quellen sind geht dies nicht.
Im genaueren geht es um mehrere Tabellen deren Zellen IDS haben (Zeilennummer+Spaltennummer).
Code: 
<!DOCTYPE html>
<html>
<body>
<table id="table1">
<tr><td id="r1c1">A</td><td id="r1c2">B</td><td id="r1c3">C</td></tr>
<tr><td id="r2c1">A</td><td id="r2c2">B</td><td id="r2c3">C</td></tr>
<tr><td id="r3c1">A</td><td id="r3c2">B</td><td id="r3c3">C</td></tr>
</table>
...
<table id="table2">
<tr><td id="r1c1">A</td><td id="r1c2">B</td><td id="r1c3">C</td></tr>
<tr><td id="r2c1">A</td><td id="r2c2">B</td><td id="r2c3">C</td></tr>
<tr><td id="r3c1">A</td><td id="r3c2">B</td><td id="r3c3">C</td></tr>
</table>
...
<table id="table3">
<tr><td id="r1c1">A</td><td id="r1c2">B</td><td id="r1c3">C</td></tr>
<tr><td id="r2c1">A</td><td id="r2c2">B</td><td id="r2c3">C</td></tr>
<tr><td id="r3c1">A</td><td id="r3c2">B</td><td id="r3c3">C</td></tr>
</table>


<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var w = document.querySelector("#table2  #r2c2").innerHTML;
    document.getElementById("demo").innerHTML = w;
}
</script>
</body>
</html>
 
@Dormilich: querySelector gibt es auf jeder Node. Damit kann man wunderbar Subbäume durchsuchen.

@uthred: dein letzer Code funktioniert doch. Was ist denn jetzt noch dein Problem?
 
Problem war, das ich zur Laufzeit des Programmes die id noch nicht aufgelöst bekommen habe ...
(Die Web-Anwendung läuft mit Angular und erzeugt die IDs automatisch)
Ist jetzt gelöst

p.s. wie stelle ich Beiträge auf gelöst? Die Option gibt es bei mir nicht (Weder im ersten Beitrag unter erweitert, noch sonst wo)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben