javascript - javascript获取所有的id子元素

  显示原文与译文双语对照的内容
110 3

如何获取一个 array 或者类似于某个div的所有元素的类似的内容?

假设我有这样的someting:


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



我想要一个 array,它看起来像这样


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

时间: 原作者:

61 3

使用 jquery each 插件的并将 id 添加到 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>
原作者:
83 2

使用 $.map 替代bashford的Jack解决方案的替代方案:


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

var ids = [];



$("#parent-div> div").each(function( index ) {


 ids.push($(this).attr('id'));


});



57 2

如果你想用纯JavaScript进行操作,只需获取父元素的子元素,然后循环将推送到 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>
...