获取所有id的子元素

Question

如何获得一个数组或类似的所有 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 。 我想要他们所有人

Answer 1

使用jQuery的each并将id push送到数组：

 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

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

Answer 3

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

Answer 4

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

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

试试地图

 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

你可以试试这个：

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

您可以将.querySelectorAll()与Descendant组合子一起使用

后裔 组合器（空间）组合器选择作为第一个元素的后代的节点。 语法： AB

"#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 9

var ids = [];

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