一个一个地获取子元素[重复]答案

【问题标题】：Get child elements one by one [duplicate]一个一个地获取子元素[重复]
【发布时间】：2021-06-28 19:52:19
【问题描述】：

如何将div的子元素一个一个打印出来？

HTML：

<div>
   <a></a>
   <a></a>
   <a></a>
</div>

我可以获取所有元素，但不能一一获取。目标是能够遍历每个项目并将所有内容保存到数组中。

这一行可以打印所有 div 子元素：

$("#types > div > div").text()

但我想要这样的东西：

["txt1","text2","text3"]

【问题讨论】：

所以使用 map()....
或者，jQuery .text() multiple elements same class

标签： javascript html jquery

【解决方案1】：

使用.children() 获取子元素，并对其进行迭代。

$("#types > div > div").children().each(function() {
    console.log($(this).text());
});

【讨论】：

【解决方案2】：

您可以执行以下操作：

确定要从中获取子文本的父元素，无论您使用的是 ID 还是类名

var parentElement = document.getElementById('parentElementId')

或使用以下内容：

var parentElement = document.querySelector('.parentElementClassname'); //gets first matching parent with this classname.

一旦你有你的父元素引用，查询所有作为 div 的子元素：

var divElements = parentElement.querySelectorAll('div'); 
// Will return a
// HTMLNodeList of all child nodes that are of type div 
// starting from the top level recursively to the inner 
// divs in order from the top to the last div node within the parent
// In short it gets all divs ordered from top level div to the 
// innermost div from first child to last child that is of type div 
// then ordered by child level as arranged in the parentDiv

或直接 div 子元素，如：

var divElements = document.querySelectorAll('.parentElementClassname > div')

或

var divElements = var divElements = document.querySelectorAll('#parentElementID > div') // first level divs only

请记住，您可以使用尽可能多的 '> div' 嵌套级别，假设我希望所有 div 最多嵌套 2 层，然后我会这样做

var divElements = var divElements = document.querySelectorAll('#parentElementID > div > div')

最后循环遍历节点列表(divElements) 以使用 forEach 按出现顺序获取元素的文本

var arrayOfTextsFromChildrenDivs = [];

divElements.forEach(function(el){
   arrayOfText.push(el.innerText)
})

这是使用 Vanilla JS 的总体思路，任何编辑和更正都会有所帮助

【讨论】：

【解决方案3】：

使用 jQuery 的 map 循环并创建一个数组。

console.log($("div &gt; a").map(function(x, elem) { return $(elem).text(); }).get())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <a>1</a>
   <a>2</a>
   <a>3</a>
</div>

【讨论】：