Получить значение атрибута данных, используя jQuery в родительском элементе

Я до сих пор не думаю, что я понял, как JQuery parent() метод работает.

У меня есть следующий HTML-код, по которому при нажатии .spot-info Я хочу получить значение data-test,

<div class="spot" id="spot-1" data-test="12345">
    <div class="spot-main">
      <span>Test</span>
      <a href="#" class="spot-info">view</a>
    </div>
</div>

<div class="spot" id="spot-2" data-test="67891">
    <div class="spot-main">
      <span>Test</span>
      <a href="#" class="spot-info">view</a>
    </div>
</div>

Пожалуйста, смотрите мою попытку JS ниже:

$('.spot-info').click(function ( e ) {
    e.preventDefault();
    var test = $(this).parent().parent().data('data-test');
    console.log(test);
});

Этот тест входит undefined в консоли. Я бы подумал, что это будет работать, так как он проверяет родителя родителя .spot-info,

Кроме того, есть ли лучший способ сделать это, а не связывать много parent(0 методы вместе? Я бы боялся, что если html-изменения это сломает, но, возможно, это недостаток использования jquery.

Источник

3 ответа

Решение

Попробуйте вместо этого attr. Кроме того, попробуйте "ближайший" вместо обращения к родителю дважды:

$('.spot-info').click(function ( e ) {
    e.preventDefault();
    var test = $(this).closest('.spot').attr('data-test');
    console.log(test);
});
Источник

Лучше, если вы могли бы использовать closest() или же parents() так что вместо:

$(this).parent().parent().data('test');

Используйте:

$(this).closest('.spot').data('test');
$(this).parents('.spot').data('test');

ПРИМЕЧАНИЕ. Основная проблема заключается в .data('data-test'); Когда вы используете data() функция, которую вы не должны добавлять строку data- в начале.

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

Рабочий фрагмент 

$('.spot-info').click(function ( e ) {
    e.preventDefault();
    var test = $(this).closest('.spot').data('test');
  
    console.log(test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spot" id="spot-1" data-test="12345">
  <div class="spot-main">
    <span>Test</span>
    <a href="#" class="spot-info">view</a>
  </div>
</div>

<div class="spot" id="spot-2" data-test="67891">
  <div class="spot-main">
    <span>Test</span>
    <a href="#" class="spot-info">view</a>
  </div>
</div>

Источник

Не уверен - но я думаю, что это так:

$('.spot-info').click(function ( e ) {
    e.preventDefault();
    var test = $(this).parent().parent().data('test');
    console.log(test);
});

Вам не нужно data- префикс при получении данных с .data()

Источник
Другие вопросы по тегам