get ALL id's of children elements

Question

How do I get an array or something similar with the id's of elements to a certain div? id的元素到某个div？

Let's say I have someting like this:

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

I would then like an array that look's something like this

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

I've tried this...

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

...but it only gives me the first childs id, eg div-no-1 . I want ALL of them

Answer 1

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> 

Answer 2

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> 

Answer 3

This can be done in plain JavaScript using document.querySelectorAll('#paren-div > div') followed by a map() and some destructuring to get the 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> 

Answer 4

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> 

Answer 5

The without jquery solution :

 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

Give map a try

 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 7

You can try this:

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

You can use .getAttribute("class") to get the CSS classes of all the elements, or any other attribute, by the same logic.

Answer 8

You can use .querySelectorAll() with Descendant combinator

Descendant combinator The (space) combinator selects nodes that are descendants of the first element. Syntax: AB

"#parent-id [id]" to match all child nodes having an id attribute, spread syntax to convert NodeList to Array and 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 9

var ids = [];

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