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

Question

我需要获取 <ul> 中 'vehicle' 类的 id。如何使用 jQuery/JavaScript 获取？是否可以通过遍历所有元素来完成？提前感谢。

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

- User_007

---

能通过迭代所有元素来完成吗？你试过了吗？ - Jai

Answer 1

使用 map() 方法。

此外，像代码段中的示例一样纠正你的 HTML 标记（class=""）。

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

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

---

如果你正在使用jQuery的.map()，我猜想你也应该加上.get()。 - Jai

@Jai...但需要为旧浏览器进行polyfill。jQuery可以满足这个要求。 - CodingIntrigue

非常感谢。完美地运作了。 - User_007

Answer 2

由于已经有其他使用jQuery的答案，这里提供一种使用纯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>

- Abhitalks

Answer 3

vehicleIds是一个数组，你需要将所有class为vehicle的元素的id添加到该数组中。

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

然后在最后使用alert函数弹出数组的内容。

- CodeHunter

---

我做了一些小改动，但那个解释很有帮助，谢谢！ - SuperBiasedMan

@SuperBiasedMan，对于善意的帮助总是感激不尽，欢迎！ - CodeHunter

Answer 4

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

这里的 div 是要将其子元素的 id 推入数组中的元素，而 '#main' 则是该 div 的 id。

希望这可以帮到你。

- Anjaney Mishra