获取具有特定类别的所有子元素的ID

问题描述：

我需要从<ul>获取'车辆'类的ID。我怎样才能得到使用jQuery/JavaScript？可以通过迭代所有元素来完成吗？提前致谢。获取具有特定类别的所有子元素的ID

<ul id="ulList"> 
    <li id="car" class="vehicle"> 
    <li id="bus" class="vehicle"> 
    <li id="cat" class="animal"> 
    <li id="dog" class="animal"> 
    <li id="bike" class="vehicle"> 
    <li id="monkey" class="animal"> 
</ul>

_可以通过遍历所有元素来完成吗？_你试过了吗？ – Jai

答

使用map()。

此外，更正您的HTML标记，如片段（class=""）。

最后，使用.get()如果你需要一个真正的JavaScript数组（而不是字符串的一个jQuery集合 — jQuery的集合[台]通常含有DOM元素，但可以包含任何东西）。

var ids = $('#ulList .vehicle').map(function(){ 
 
    return $(this).attr('id'); 
 
    }).get(); 
 

 
console.log(ids);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<ul id="ulList"> 
 
    <li id="car" class="vehicle"></li> 
 
    <li id="bus" class="vehicle"></li> 
 
    <li id="cat" class="animal"></li> 
 
    <li id="dog" class="animal"></li> 
 
    <li id="bike" class="vehicle"></li> 
 
    <li id="monkey" class="animal"></li> 
 
</ul>

@AmmarCSE我猜'.get（）'也应该在那里你正在使用jQuery的'.map（）'。 – Jai

@Jai ...但需要为旧浏览器填充。 jQuery涵盖了这个要求 – CodingIntrigue

@ T.J.Crowder，很好，谢谢你的建议 – AmmarCSE

答

vehicleIds是一个数组对您push所有它的类是vehicle元件的ID。

var vehicleIds = []; 
$(".vehicle").each(function(){ 
    vehicleIds.push($(this).attr("id")); 
}); 
alert(vehicleIds);

然后我alert数组在结束。

我做了一些小的改动，但是这个解释有用，谢谢！ – SuperBiasedMan

@SuperBiasedMan的帮助永远是值得赞赏的，欢迎光临！ – CodeHunter

答

因为已经有其他的答案与jQuery，这里是用vanila的JavaScript替代：

var vehicles = document.querySelectorAll("ul#ulList > li.vehicle"); 
 
var ids = [].map.call(vehicles, function(elem) { 
 
    return elem.id; 
 
}); 
 
console.log(ids);

<ul id="ulList"> 
 
    <li id="car" class="vehicle"> 
 
    <li id="bus" class="vehicle"> 
 
    <li id="cat" class="animal"> 
 
    <li id="dog" class="animal"> 
 
    <li id="bike" class="vehicle"> 
 
    <li id="monkey" class="animal"> 
 
</ul>

答

$('div','#main').each(function(){ 
    array.push($(this).attr('id')); 
});

这里的div是其子女的ID已经在推的元素数组&'#main'是该div的ID。

希望这会帮助你。

获取具有特定类别的所有子元素的ID

相关推荐