Получить идентификатор строки таблицы с определенным классом Javascript

Question

Мне нужно получить значение id каждой строки в моей таблице, которая имеет выбранный класс. Мне нужно иметь возможность сделать это в javascript; не jquery.

<tr id="1" class="selected"></tr> 
<tr id="2"></tr> 
<tr id="3" class="selected"></tr> 
<tr id="4"></tr> 

Это должно возвращать массив: [1,3]

Любая помощь приветствуется. Благодарю.

Answer 1

Это решение, использующее PureJS. нет JQuery вообще.

used getElementsByClassName.

var cont = document.getElementById("container"); 
 
var array = cont.getElementsByClassName("selected"); 
 

 
for (var i = 0; i < array.length; i++)alert(array[i].id);

<table id="container"> 
 
<tr id="1" class="selected">asdasd</tr> 
 
<tr id="2">asdasdasd</tr> 
 
<tr id="3" class="selected">asdasdasd</tr> 
 
<tr id="4">asdasdasd</tr> 
 
</table>

Answer 2

Получить элементы, преобразовать в массив, извлечь идентификаторы. Простой:

var elements = document.getElementsByClassName("selected"); 
var elements_array = [].slice.call(elements); 
var ids = elements_array .map(function(element){ return element.id }); 

Еще проще в JQuery, хотя:

var ids = $(".selected").map(function(index, element){return element.id}); 

Answer 3

Это должно быть что-то вроде этого

var elements = document.getElementsByClassName("selected"); 
var idArray=[]; 
for (var i = 0, len = elements.length; i < len; i++) { 
    idArray.push(elements[i].attr('id')); 
} 

Answer 4

Вы можете получить выбранные элементы с помощью querySelectorAll:

var selected = document.querySelectorAll(".selected"); 

... тогда y НУ можете получить их id сек, применяя Array#map, даже если selected является NodeList, а не массив:

var ids = Array.prototype.map.call(selected, function(element) { 
    return element.id; 
}); 

Все в одном:

var ids = Array.prototype.map.call(document.querySelectorAll(".selected"), function(element) { 
    return element.id; 
}); 

---

querySelectorAll поддерживается всеми современными браузерами, и также IE8.

Array.prototype.map существует во всех современных браузерах и может быть легко заполнен на старых, таких как IE8.

---

Если вы собираетесь делать это много, это удобно, чтобы захватить копию map переменной:

var map = Array.prototype.map; 

// ...later... 

var ids = map.call(document.querySelectorAll(".selected"), function(element) { 
    return element.id; 
});