在父元素中使用 jQuery 获取数据属性的值

Question

我有以下 HTML 代码，其中 .spot-info 的 onclick 我想获得 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) 方法链接在一起而不是使用 jQuery。

Answer 1

试试 attr。另外，尝试 'closest' 而不是两次引用父级：

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

Answer 2

不确定 - 但我认为是这样的：

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

使用 .data()

获取数据时不需要 data- 前缀

Answer 3

如果你可以使用 closest() or 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>

在父元素中使用 jQuery 获取数据属性的值

Get value of data attribute using jQuery in parent element

javascript

jquery

parent

工作片段