获取所有子元素的ID

Question

如何获取包含某个div中所有元素的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>

然后我希望得到一个类似于这样的数组

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。我想要所有的。

- wenzzzel

---

你是想输出一个字符串数组还是一个JavaScript纯对象数组？ - guest271314

Answer 1

使用jQuery的 each 函数和 push 方法将 id 添加到数组中：

$('selector').each(function() {
  array.push($(this).attr('id'));
});

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>

- Jack Bashford

Answer 2

使用 $.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>

- Jeto

Answer 3

如果你想用纯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>

- Alberti Buonarroti

Answer 4

这可以通过纯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>

- jo_va

Answer 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>

- Fabien Greard

Answer 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>

- Doug F

Answer 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类，或任何其他属性，按照相同的逻辑。

- Razvan Zamfir

Answer 8

你可以使用 .querySelectorAll() 与 后代组合器。

后代 组合器选择作为第一个元素的后代节点。语法：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>

- guest271314

Answer 9

var ids = [];

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

- Dan N.

Answer 10

const ids = [];
jQuery.map(jQuery('#parent-div div'), function (elem, index) {
  if (elem) {
    ids.push(elem.getAttribute('id'));
  }
});

使用上述代码，它会从父 div 中查找所有的 div 并对其进行迭代，获取每个元素的 id 属性并将其推入数组中。

- Gaurav Patil

---

你的回答可以通过增加有关代码功能及其如何帮助提问者的更多信息来改进。 - Tyler2P