通過純javascript獲取div的第n個孩子
[英]Get nth child of the div by pure javascript
問題描述
我有一個名為“myDiv”的 div 元素。 如何通過 DOM 操作獲得“myDiv”的第 n 個孩子？ 標記：
function revealNibble(n) { //Do something here... var elements=document.getElementById('myDiv').children; for(var i=1;i<=elements.length;i++){ if(n===i){ var output=elements[i].innerText || elements[i].textContent; document.getElementById('output').innerHtml=output; } } }
<body> <div id="myDiv"> <p>One</p> <p>Two</p> <p>Three</p> <p>Four</p> <p>Five</p> </div> <hr/> <div id="output"></div> </body>我的代碼不起作用！！！
3 個解決方案
解決方案1
14 2018-01-06 16:27:46
您可能正在尋找NodeList.item() ：
var elements=document.getElementById('myDiv').children
elements.item(n)
請參閱： https : //developer.mozilla.org/en-US/docs/Web/API/NodeList/item
解決方案2
5 2018-01-06 16:36:45
var n = 4 console.log( myDiv.children [n - 1] ) // Nth Element <p>Four</p> console.log( myDiv.childNodes[n - 1] ) // Nth Node <p>Two</p>
<body> <div id="myDiv"> <p>One</p> <p>Two</p> <p>Three</p> <p>Four</p> <p>Five</p> </div> <hr/> <div id="output"></div> </body>
解決方案3
1 2018-01-06 16:27:12
更改為innerHTML
function revealNibble(n) { //Do something here... var elements = document.getElementById('myDiv').children; for (var i = 1; i <= elements.length; i++) { if (n === i) { var output = elements[i].innerHTML || elements[i].textContent; document.getElementById('output').innerHTML = output; // changed here } } } revealNibble(3)
<div id="myDiv"> <p>One</p> <p>Two</p> <p>Three</p> <p>Four</p> <p>Five</p> </div> <hr/> <div id="output"></div>
如何使用jQuery或JavaScript獲取第n個div的子元素值
[英]How to get nth div's child element value using jquery or javascript
如何在純 javascript 而不是 jquery 中獲取第 n 個父元素
[英]How to get nth- parent element in pure javascript and not jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.