get ALL id's of children elements

Use jQuery's each and push the id to the array:

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>


An alternative to Jack Bashford's solution using $.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>

Or, using .map and .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>


If you want to do it in pure JavaScript, you can just get the children of the parent element and then loop over the result and push the ids into an array.

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>

Tags:

Javascript

Html

Jquery

Ecmascript 6

Recent Posts