Поиск родительской строки ввода текста формы

Я пытаюсь использовать атрибуты данных в таблице HTML для хранения данных об элементе, который позже будет использоваться в вызове ajax, но у меня возникают проблемы с моим выбором jQuery, когда я пытаюсь вернуть данные из.

Это работает:

var listItemId = $(this).parent().parent().attr('data-id');

Однако селектор .parent().parent() слишком хрупок - он сломается, если я когда-либо изменю структуру HTML.

Это то, что я хотел бы сделать, но он возвращает undefined:

var listItemId = $(this).parent('.list-item').attr('data-id');

Мой HTML выглядит так:

<tr class="list-item" data-id="1">
   <td>
     <input value="Some text entered by the user" type="text" >
   </td>
</tr>

Что мне не хватает?

Ответ 1

внутренне, jquery использует .closest для такого рода материалов.

var listItemId = $(this).closest('tr').attr('data-id');

Кроме того, если у вас есть вложенные таблицы (которые я никогда не видел, но мы никогда не знаем), вам нужно также выбрать первый "tr". (это более полезно при поиске divs, чем строк, хотя). Однако для унификации кода я никогда не использую родителей, когда мне нужно ближе всего. Таким образом, названия функций подразумевают, что это означает точно (ближайший родительский), в то время как .parents() оставляет больше места для интерпретации и, следовательно, уменьшает читаемость кода (imo)

они эквивалентны (проверьте этот jsperf)

Наконец, вы можете также рассмотреть простой подход javasrcipt: parentNode (на миллионы быстрее, чем все остальное, если вам действительно нужна скорость)

в вашем случае:

var listItemId = $(this.parentNode.parentNode).attr('data-id');

или

var listItemId = this.parentNode.parentNode.attributes['data-id'].value;

NB: для чистых javascript-методов нужен действительный html для работы, в отличие от одного в вашем вопросе (закройте свой тег ввода и добавьте таблицу).

вот небольшая скрипка

Ответ 2

попробуйте

var listItemId = $(this).parents('.list-item').attr('data-id');

parent() увеличивается в дереве, пока не будет соответствовать селектору

Ответ 3

Я бы предложил:

var listItemId = $(this).parents('tr').data('id');

Селектор классов является самым медленным из всех селекторов jQuery, и его следует избегать, если нет другого способа найти нужную вам информацию.

UPDATE

Я исправил синтаксис, чтобы правильно использовать метод .data(). Этот способ работает только в версии 1.4.3 или выше.

Ответ 4

$(this).closest('tr').attr('data-id');

Это будет наилучшим решением для вашей проблемы. Код не зависит от структуры html, если вы не вводите новый <tr> тег между