zu einem div mit der gleichen ID wie ein anderer in einem div Bezug innerhalb eines anderen

Question

Wie kann ich auf eine verschachtelte div von id beziehen, wenn sie die gleiche ID wie ein div in einem ähnlich benannten div

zB

verschachtelt hat

<div id="obj1"> 
    <div id="Meta"> 
     <meta></meta> 
    </div> 
</div> 

<div id="obj2"> 
    <div id="Meta"> 
     <meta></meta> 
    </div> 
</div> 

ich möchte die innerHTML- von meta

document.getElementById('obj1').getElementById('Meta').getElementsByTagName('meta') 

funktioniert nicht bekommen

Answer 1

IDs sollten nur verwendet werden, wenn eines dieser Elemente auf der Seite vorhanden ist, sei es SPAN, DIV oder was auch immer. CLASS ist, was Sie verwenden sollten, wenn Sie ein sich wiederholendes Element haben.

Code dort funktioniert nicht, weil Sie auf ein Element durch eindeutige ID beziehen, aber mehr als eins auf der Seite haben.

Answer 2

Id soll u sein nique.

Answer 3

Sie können auch Probleme mit diesem Markup haben, da das "Meta" -Tag nur innerhalb des head-Tags und nicht des body-Tags zulässig ist. Soweit ich das an Firebug sehen kann, wird Firefox sogar so weit gehen, diese Meta-Tags aus dem Körper zu ziehen und sie in den Kopf zu werfen (und in diesem Fall jeden Textinhalt in das Eltern-Div setzen), Sie werden sie also im DOM überhaupt nicht sehen.

Answer 4

Da das ID-Attribut eine eindeutige dokumentenweite Kennung ist, sollten Sie Ihre IDs wahrscheinlich mit einem Namespace versehen.

<div id="obj1"> 
    <div id="obj1_Meta"> 
     <meta></meta> 
    </div> 
</div> 

<div id="obj2"> 
    <div id="obj2_Meta"> 
     <meta></meta> 
    </div> 
</div> 

document.getElementById('obj1_Meta').getElementsByTagName('meta') 

Answer 5

Für die HTML Sie gegeben haben, sollte diese Arbeit:

document.getElementById('obj1').getElementsByTagName('div')[0].getElementsByTagName('meta'); 

einfach die falsche ID auf der inneren div ignorieren und es von Tag-Namen bekommen. Sie sollten auch in der Lage sein, die innere div vollständig zu ignorieren, da getElementsByTagName den gesamten Teilbaum suchen:

document.getElementById('obj1').getElementsByTagName('meta'); 

Answer 6

Hass, das Offensichtliche zu betonen, aber in Ihrem Beispiel obj1_Meta und obj2_Meta sind einzigartig ids, also wenn es der Fall ist in Ihrem Arbeitscode:

document.getElementById('obj1_Meta').getElementsByTagName('meta')[0].innerHTML; 

würde funktionieren wie beschrieben. Haben Sie das als Doppel-Check gedacht?

Wenn nicht, enttäuschung ...

als „schlecht“ oder „falsch“ als Code ist, eine Option, die ein JavaScript-Frameworks wie jQuery verwendet arbeiten ist. Sobald Sie es aufgenommen haben, können Sie Elemente erhalten, indem es einen CSS-Selektor (auch eine semantisch falsche) wie so vorbei:

$('#obj1 #obj1_Meta meta').html() 

$() ist der Weg der jQuery sagen document.getElementById() ... auf Steroiden. .html() ist das Äquivalent von .innerHTML

Andere Frameworks wie PrototypeJS und MooTools bieten auch ähnliche Funktionen.

Prototyp zum Beispiel:

$$('#obj1 #obj1_Meta meta').innerHTML;//note the double $'s 

Frameworks viel Zeit und Mühe in Bezug auf Browser-Kompatibilität speichern, "fehlende" JavaScript-Methoden (wie getElementsByClassName) und schnell AJAX-Codierung. Diese Dinge machen sie zu einer guten Idee, um auf jeden Fall zu verwenden.

Answer 7

IDs sollen eindeutig sein, Klassen intelligent verwenden.

<div id="obj1" class="obj"> 
    <div id="obj1_Meta" class="obj_Meta"> 
     <meta></meta> 
    </div> 
</div> 

<div id="obj2" class="obj"> 
    <div id="obj2_Meta" class="obj_Meta"> 
     <meta></meta> 
    </div> 
</div> 

• .obj = Ziele beider Elemente
• #obj1.obj = Ziele werden nur die ersten
• #obj1.obj_Meta = Ziele OBJ1 innere DIV
• #obj2.obj = Ziele nur die zweiten
• #obj2.obj_Meta = Ziele OBJ2 innere DIV