web-dev-qa-db-fra.com

Sélection de seconds enfants de première div enfants en javascript

J'ai un code HTML qui ressemble à quelque chose comme ça:

<div id="mainDiv"> <-- I have this
    <div>
        <div></div>
        <div></div> <-- I need to get this
    </div>
    <span></span>
    <more stuff />
</div>

j'utilise:

var mainDiv = document.getElementById('mainDiv');

parce que j'ai besoin de cette div dans une variable, mais j'ai également besoin d'obtenir cette seconde div sur la première div de mainDiv dans une variable 

Comment pourrais-je le faire d'une manière simple, multi-navigateur?

javascripthtmlparent-childgetelementbyid
20
James Harzs

En supposant que cette structure soit statique, vous pouvez le faire:

var mainDiv = document.getElementById('mainDiv'),
    childDiv = mainDiv.getElementsByTagName('div')[0],
    requiredDiv = childDiv.getElementsByTagName('div')[1];

Pour en savoir plus: .getElementsByTagName() (from MDN) .

25
nnnnnn
 var mainDiv = document.getElementById('mainDiv');
 var x = mainDiv.children[0].children[1];

ou

 var mainDiv = document.getElementById('mainDiv');
 var x = mainDiv.getElementsByTagName('div')[0].getElementsByTagName('div')[1];
11
Chao Zhang

Je choisirais jQuery et finirais avec quelque chose comme ceci:

var getThis = $('#mainDiv > div:eq(0) > div:eq(1)');

Fiddle

6
Ja͢ck

J'irais simplement avec une seule ligne de code Vanilla. 

Fonctionne pour tous les éléments, ne se limite pas aux noms de balises que vous avez dans la structure. Mais le nombre d'éléments et la hiérarchie doivent être préservés.

var requiredDiv = document.getElementById('mainDiv').firstChild.firstChild.nextSibling;
4
TeeJay
var mainDiv = document.getElementById('mainDiv');
var div = maindiv.getElementsByTagName('div')[2];//third div

http://jsfiddle.net/MGVw8/

0
Musa