Получить идентификаторы всех дочерних элементов с определенным классом

Question

Мне нужно получить идентификатор класса «автомобиль» от <ul>. Как я могу получить это с помощью 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> 

Answer 1

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>

Answer 2

vehicleIds представляет собой массив, к которому вы push все идентификаторы элементов, класс vehicle.

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

Then I alert массив в конце.

Answer 3

Как уже есть другие ответы с 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>

Answer 4

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

Здесь ДИВ это элемент, детский идентификатор должны быть нажаты массив & '#main' является идентификатором этого div.

Надеюсь, это вам поможет.