Met verwysing na 'n div binne 'n div met dieselfde ID as ander in 'n ander

StackOverflow https://stackoverflow.com/questions/617450

Vra

Hoe kan ek verwys na 'n sub-div deur id wanneer dit het dieselfde ID-as 'n div geneste in 'n soortgelyke naam div

bv 

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

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

Ek wil die innerHTML van meta kry 

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

nie werk nie

Was dit nuttig?

Oplossing

ID's moet slegs gebruik word wanneer daar is een van daardie item op die bladsy, of dit nou 'n span, DIV of wat ook al. Klas wat jy moet gebruik vir wanneer jy 'n herhaling element kan hê.

Kode daar nie werk nie, want jy verwys na 'n element deur 'n unieke ID, maar het meer as een op die bladsy.

Ander wenke

ID is veronderstel om uniek te wees.

haat te wys op die voor die hand liggend, maar in jou voorbeeld, obj1_Meta en obj2_Meta is unieke ID's, so as dit die geval is in jou werk-kode: 

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

sal werk soos beskryf. As 'n dubbel check, het jy meer as dink dit?

Indien nie, dis jammer ...

As "slegte" of "verkeerd" as jou kode is, 'n opsie wat sal werk is om 'n JavaScript raamwerk soos jQuery gebruik. Sodra jy dit het ingesluit, kan jy elemente kry deur dit 'n CSS selector (selfs 'n semanties foutiewe een) soos so: 

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

$ () is jQuery se manier om te sê document.getElementById () ... op steroïede. Html () is die ekwivalent van .innerHTML

Ander raamwerke, soos PrototypeJS en MooTools bied ook soortgelyke funksies.

Prototype byvoorbeeld: 

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

raamwerke te red baie tyd en moeite met betrekking tot die leser verenigbaarheid, "ontbreek" JavaScript metodes (soos getElementsByClassName) en vinnig kodering AJAX. Hierdie dinge maak hulle 'n goeie idee om in elk geval gebruik om.

-ID's is bedoel om uniek te wees, gebruik klasse intelligent. 

<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 = teikens beide elemente
  • #obj1.obj = teikens net die eerste
  • #obj1.obj_Meta = teikens obj1 innerlike DIV
  • #obj2.obj = teikens slegs die tweede
  • #obj2.obj_Meta = teikens obj2 innerlike DIV

Jy kan ook in die moeilikheid met hierdie opmaak omdat die "meta" tag is slegs wettig binne die kop tag, nie die liggaam tag. Sover ek kan vertel van kyk na Firebug, sal Firefox selfs so ver gaan as om diegene metatags trek uit die liggaam en gooi dit in die kop (en, in hierdie geval, het enige teks inhoud in die ouer div), sodat jy sal hulle nie sien in die DOM at all.

Vir die HTML jy gegee het, moet hierdie werk: 

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

Net ignoreer die valse id op die innerlike div en kry dit deur tag naam. Jy moet ook in staat wees om die innerlike div heeltemal ignoreer, aangesien getElementsByTagName soek die hele substructuur: 

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

As die id kenmerk is 'n unieke dokument-wye identifiseerder, jy moet waarskynlik naamruimte jou ID's. 

<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')
Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top