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

Question

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

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

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>

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

Answer 1

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

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

Более того, если у вас есть вложенные таблицы (которые я никогда не видел, но мы никогда не узнаем), вы также должны выбрать первую 'tr'. (хотя это более полезно при поиске элементов div, чем строк). Однако для унификации кода я никогда не использую родителей, когда мне нужно самое близкое. Таким образом, имена функций подразумевают, что они имеют точное значение (ближайший родительский элемент), тогда как .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, в отличие от того, который задан в вашем вопросе (закройте входной тег и добавьте табличный).

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

Answer 2

попробуй

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

parent () поднимается в дереве, пока не совпадет с селектором

Answer 3

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

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

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

UPDATE

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

Answer 4

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

Это будет лучшим решением для вашей проблемы. Код не будет зависеть от вашей HTML-структуры, если вы не введете новый тег

между