Referindo-se a uma div dentro de uma div com o mesmo ID que outro dentro de outra

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

Pergunta

Como posso referir a um div aninhado por id quando se tem o mesmo ID como um div aninhado em um nome semelhante div

ex 

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

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

Eu quero começar o innerHTML da meta 

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

não trabalho

Foi útil?

Solução

IDs só deve ser usado quando há uma desse item na página, seja ele um SPAN, DIV ou o que quer. CLASS é o que você deve usar para quando você pode ter um elemento repetindo.

código não funciona porque você está se referindo a um elemento de identificação única, mas ter mais de um na página.

Outras dicas

Id é suposto ser único.

O ódio para apontar o óbvio, mas no seu exemplo, obj1_Meta e obj2_Meta são únicos id de, por isso, se é o caso em seu código de trabalho: 

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

iria funcionar como descrito. Como uma dupla verificação, que você pense sobre isso?

Se não, chatice ...

Como "mau" ou "errado", como seu código é, uma opção que vai funcionar é usar um framework JavaScript como jQuery. Uma vez que você incluí-lo, você pode obter elementos, passando-a de um seletor CSS (mesmo um semanticamente incorreta) assim: 

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

$ () é maneira de dizer document.getElementById () ... em esteróides do jQuery. .html () é a sua equivalente de .innerHTML

Outras estruturas, como PrototypeJS e MooTools também fornecer funcionalidade semelhante.

Prototype por exemplo: 

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

Frameworks economizar muito tempo e problemas no que diz respeito à compatibilidade do navegador, "em falta" métodos JavaScript (como getElementsByClassName) e codificação AJAX rapidamente. Essas coisas fazem-lhes uma boa idéia usar a de qualquer maneira.

IDs são destinadas a ser único, classes de uso da inteligência. 

<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 = alvos ambos os elementos
  • #obj1.obj = alvos apenas o primeiro
  • #obj1.obj_Meta = alvos Obj1 DIV interior
  • #obj2.obj = alvos apenas a segunda
  • #obj2.obj_Meta = alvos obj2 DIV interior

Você também pode ter problemas com essa marcação porque a "meta" tag só é legal dentro da tag cabeça, não a tag corpo. Tanto quanto eu posso dizer de olhar para Firebug, o Firefox vai mesmo ir tão longe como para puxar esses meta tags para fora do corpo e atirá-los para a cabeça (e, neste caso, colocar qualquer conteúdo de texto dentro da div pai), assim você não vai vê-los no DOM em tudo.

Para o HTML que você deu, isso deve funcionar: 

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

Apenas ignorar o id falso sobre a div interna e obtê-lo pelo nome tag. Você também deve ser capaz de ignorar o div interna completamente, já que getElementsByTagName procura em toda a sub-árvore: 

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

Como o atributo id é um identificador de grande documento único, você provavelmente deve namespace seus ids. 

<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')
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top