在javascript中选择第一个div孩子的第二个孩子[重复]
Posted
技术标签:
【中文标题】在javascript中选择第一个div孩子的第二个孩子[重复]【英文标题】:Selecting second children of first div children in javascript [duplicate] 【发布时间】:2012-08-16 09:50:00 【问题描述】:我有一个看起来像这样的 html:
<div id="mainDiv"> <-- I have this
<div>
<div></div>
<div></div> <-- I need to get this
</div>
<span></span>
<more stuff />
</div>
我正在使用:
var mainDiv = document.getElementById('mainDiv');
因为我需要 var 中的那个 div,但我还需要将 mainDiv 内第一个 div 上的第二个 div 放入一个变量中。
我怎样才能以简单的跨浏览器方式做到这一点?
【问题讨论】:
【参考方案1】:假设结构是静态的,您可以这样做:
var mainDiv = document.getElementById('mainDiv'),
childDiv = mainDiv.getElementsByTagName('div')[0],
requiredDiv = childDiv.getElementsByTagName('div')[1];
延伸阅读:.getElementsByTagName()
(from MDN).
【讨论】:
这非常有效。直截了当,我喜欢它:)【参考方案2】: var mainDiv = document.getElementById('mainDiv');
var x = mainDiv.children[0].children[1];
或
var mainDiv = document.getElementById('mainDiv');
var x = mainDiv.getElementsByTagName('div')[0].getElementsByTagName('div')[1];
【讨论】:
children[0] 完美运行 - 谢谢!【参考方案3】:我只需要一行原版代码即可。
适用于任何元素,不限于结构中的标签名称。但必须保留元素的数量和层次结构。
var requiredDiv = document.getElementById('mainDiv').firstChild.firstChild.nextSibling;
【讨论】:
【参考方案4】:我会选择 jQuery 并最终得到这样的结果:
var getThis = $('#mainDiv > div:eq(0) > div:eq(1)');
Fiddle
【讨论】:
你能在 vanillajs 中做到这一点吗?【参考方案5】:你知道现在有querySelector
吗?
console.log(
mainDiv.querySelector(':nth-child(1) > :nth-child(2)'))
<div id="mainDiv">
<div>
<div></div>
<div>come get me</div>
</div>
<!-- more stuff -->
</div>
【讨论】:
有用的方法。但语气似乎居高临下。【参考方案6】:var mainDiv = document.getElementById('mainDiv');
var div = maindiv.getElementsByTagName('div')[2];//third div
http://jsfiddle.net/MGVw8/
【讨论】:
以上是关于在javascript中选择第一个div孩子的第二个孩子[重复]的主要内容,如果未能解决你的问题,请参考以下文章
有两个孩子的父 div。即使没有显示另一个孩子,也总是让一个孩子填充父母?