获取所有子元素的 id

Posted 2023-02-22

【中文标题】获取所有子元素的 id

【英文标题】：get ALL id's of children elements

【发布时间】：2019-07-10 16:23:46

【问题描述】：

我如何获得一个数组或类似于 ALL 元素的 id 到某个 div 的东西？

假设我有这样的事情：

<div id="parent-div">
    <div id="div-no-1"></div>
    <div id="div-no-2"></div>
    <div id="div-no-3"></div>
    <div id="div-no-4"></div>
</div>

然后我想要一个看起来像这样的数组

parent-div [
    0: "div-no-1",
    1: "div-no-2",
    2: "div-no-3",
    3: "div-no-3"
];

我试过这个...

$("#parent-div > div").attr("id");

...但它只给了我第一个孩子的 id，例如div-no-1。我想要他们所有人

【问题讨论】：

您是要输出字符串数组还是 javascript 普通对象数组？

【参考方案1】：

使用jQuery的each和pushid到数组：

var parentDiv = [];
$("#parent-div > div").each((index, elem) => 
  parentDiv.push(elem.id);
);

console.log(parentDiv);

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id="parent-div">
    <div id="div-no-1"></div>
    <div id="div-no-2"></div>
    <div id="div-no-3"></div>
    <div id="div-no-4"></div>
</div>

【参考方案2】：

如果您想在纯 JavaScript 中执行此操作，您只需获取父元素的子元素，然后循环遍历结果并将 id 推送到数组中。

var children = document.getElementById("parent-div").children;

var idArr = [];

for (var i = 0; i < children.length; i++) 
  idArr.push(children[i].id);


console.log(idArr);

<div id="parent-div">
    <div id="div-no-1"></div>
    <div id="div-no-2"></div>
    <div id="div-no-3"></div>
    <div id="div-no-4"></div>
</div>

【参考方案3】：

var ids = [];

$("#parent-div > div").each(function( index ) 
    ids.push($(this).attr('id'));
);

【参考方案4】：

使用$.map 替代 Jack Bashford 的解决方案：

const divIds = $.map($('#parent-div > div'), div => div.id);

console.log(divIds);

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id="parent-div">
  <div id="div-no-1"></div>
  <div id="div-no-2"></div>
  <div id="div-no-3"></div>
  <div id="div-no-4"></div>
</div>

或者，使用.map 和.get：

const divIds = $('#parent-div > div').map((i, div) => div.id).get();

console.log(divIds);

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id="parent-div">
  <div id="div-no-1"></div>
  <div id="div-no-2"></div>
  <div id="div-no-3"></div>
  <div id="div-no-4"></div>
</div>

【参考方案5】：

没有jquery的解决方案：

const elements = [...document.querySelectorAll('#parent-div *[id]')];

console.log(elements.map(( id ) => id));

<div id="parent-div">
    <div id="div-no-1"></div>
    <div id="div-no-2"></div>
    <div id="div-no-3"></div>
    <div id="div-no-4"></div>
</div>

【参考方案6】：

试试map

var arr = jQuery.map($("#parent-div").children(), function (d) 
  return $(d).attr("id");
);
console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="parent-div">
    <div id="div-no-1"></div>
    <div id="div-no-2"></div>
    <div id="div-no-3"></div>
    <div id="div-no-4"></div>
</div>

【参考方案7】：

你可以试试这个：

// Make an empty arary to push ids into
var arrayOfIds = [];

// Select parent element
var parentElement = document.querySelector('#parent-div');

// Select child elements
var childElements = parentElement.querySelectorAll("div");

// Push the id attribute of every child element
// Into he previousely created array
for (var i = 0; i < childElements.length; i++) 
  arrayOfIds.push(childElements[i].getAttribute("id"));


console.log(arrayOfIds);

<div id="parent-div">
    <div id="div-no-1"></div>
    <div id="div-no-2"></div>
    <div id="div-no-3"></div>
    <div id="div-no-4"></div>
</div>

您可以使用.getAttribute("class") 以相同的逻辑获取所有元素的 CSS 类或任何其他属性。

【参考方案8】：

您可以将.querySelectorAll() 与Descendant combinator 一起使用

Descendant 组合器（空格）组合器选择符合以下条件的节点 第一个元素的后代。语法：A B

"#parent-id [id]" 匹配所有具有id 属性的子节点，扩展语法将NodeList 转换为Array 和Array.prototype.map()

<div id="parent-div">
    <div id="div-no-1"></div>
    <div id="div-no-2"></div>
    <div></div>
    <div class="div-no-2-6-6"></div>
    <div id="div-no-3"></div>
    <div id="div-no-4"></div>
    text
</div>
<script>
  let ids = [...document.querySelectorAll("#parent-div [id]")].map((id) => id);
  console.log(ids);
</script>

【参考方案9】：

这可以在纯 JavaScript 中使用 document.querySelectorAll('#paren-div > div') 后跟 map() 和一些解构来获取 id 来完成。

const ids = [...document.querySelectorAll('#parent-div > div')].map(( id ) => id);

console.log(ids);

<div id="parent-div">
    <div id="div-no-1"></div>
    <div id="div-no-2"></div>
    <div id="div-no-3"></div>
    <div id="div-no-4"></div>
</div>