jQuery selector не выделяют полностью. Пропускает элементы

Рейтинг: 0Ответов: 1Опубликовано: 16.04.2015

Есть HTML таблица, которую надо обновлять с помощью ajax:

<table id="types_table" border="1">

    <tr>
        <td><h5>Ship type:</h5></td>
        <td><h5>Count left:</h5></td>
    </tr>

    <tr id="types_row" data-type="1">
        <td>1</td>
        <td id="count_td">4</td>
    </tr>

    <tr id="types_row" data-type="2">
        <td>2</td>
        <td id="count_td">3</td>
    </tr>

    <tr id="types_row" data-type="3">
        <td>3</td>
        <td id="count_td">2</td>
    </tr>

    <tr id="types_row" data-type="4">
        <td>4</td>
        <td id="count_td">1</td>
    </tr>

</table>

JS кусок выглядит так:

var types = data.types_key;
console.log(types); //json объект в порядке полном.

for (var key in types) {
    console.log("type: "+key+" count: "+$(" tr#types_row[data-type=" + key + "] td#count_td").text());
}

От сервера приходит совершенно нормальный json объект {1=4,2=3,3=2,4=1}; Но применить этот объект к таблице я не могу - т.к. селекторы выделяют неизвестно что.

type: 1 count: 4
type: 2 count: 
type: 3 count: 
type: 4 count: 

это то, что написала мне консоль. Почему селектор сработал только для одного элемента? Таблица ведь имеет эти аттрибуты.

Ответы

▲ 2Принят

Селектор jQuery по ID элемента возвращает первый встретившийся элемент. Соответственно у тебя находится первый <tr>, а потом он же фильтруется по data-type.

Для того, чтобы твой код заработал, надо у всех <tr> выставить класс types_row и его использовать в селекторе, тогда код будет работать так как ты хочешь.