получить ВСЕ идентификаторы дочерних элементов

Question

Как мне получить массив или что-то подобное с ALL идентификаторами элементов определенного 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");

... но он дает мне только первый идентификатор ребенка, например, div-no-1.Я хочу ВСЕХ из них

Answer 1

Вы можете использовать .querySelectorAll() с комбинатором Descendant

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>

Answer 2

Это можно сделать простым JavaScript, используя document.querySelectorAll('#paren-div > div'), затем map() и некоторую деструктуризацию для получения идентификатора.

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>

Answer 3

Дай карту попробовать

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>

Answer 4

Вы можете попробовать это:

// 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 всех элементов или любой другой атрибут по той же логике.

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>

Answer 6

Альтернатива решению Джека Башфорда с использованием $.map:

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>

Answer 7

var ids = [];

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

Answer 8

Если вы хотите сделать это в чистом JavaScript, вы можете просто получить дочерние элементы родительского элемента, а затем перебрать результат и поместить идентификаторы в массив.

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>

Answer 9

Используйте jQuery's each и push 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>