wake-up-neo.com

Auswählen der zweiten Kinder der ersten Div-Kinder in Javascript

Ich habe eine HTML, die ungefähr so ​​aussieht:

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

ich benutze:

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

weil ich das div in einem var brauche, aber ich muss auch das zweite div des ersten div in mainDiv in eine Variable bringen. 

Wie kann ich das auf einfache Weise browserübergreifend tun?

javascripthtmlparent-childgetelementbyid
20
James Harzs

Wenn die Struktur statisch ist, können Sie Folgendes tun:

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

Weiterführende Literatur: .getElementsByTagName() (von MDN) .

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

oder

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

Ich würde jQuery auswählen und am Ende so etwas wie:

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

Fiddle

6
Ja͢ck

Ich würde einfach mit nur einer Zeile Vanilla-Code gehen. 

Funktioniert für beliebige Elemente, ist nicht auf die Tag-Namen beschränkt, die Sie in der Struktur haben. Die Anzahl der Elemente und die Hierarchie müssen jedoch beibehalten werden.

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