单击锚标记时获取父<th>的属性值

Question

我有以下表结构：

<th data-column-index="7">Total Activity Amount 

    <a class="btn btn-app btn-default filterStyle" onclick="getFilter(this)">

        <i class="fa fa-filter f_7" aria-hidden="true"></i>

    </a>

</th>

当我单击 getFilter() OnClick 事件时，我需要获取“数据列索引”值。我已经尝试过以下在 Onclick 事件中获取父值的方法

function getFilter1(e){

    var evID=$(e).parent().find('data-column-index').val();

    alert(evID);

}

或者

var evID =  $(this).parent('thead th').attr("data-column-index");

或者

var evID = $(this).closest('th').attr("data-column-index");

我得到相同错误的所有原因，例如“错误！内容未定义。

请帮我解决这个问题。谢谢

请注意： 'data-column-index' 是 J Query 数据表中的动态值，当我们改变位置时它会自动更新。所以我不能直接将此值添加到点击事件

Answer 1

您可以尝试使用 jQuery .data()存储与匹配元素关联的任意数据，或在命名数据存储中返回匹配元素集中第一个元素的值。function getFilter(e){&nbsp; $(e).parent().data('column-index', 8); // change the value&nbsp; var evID=$(e).parent().data('column-index');&nbsp; alert(evID);}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>&nbsp; <thead>&nbsp; &nbsp; <th data-column-index="7">Total Activity Amount&nbsp;&nbsp; &nbsp; &nbsp; <a class="btn btn-app btn-default filterStyle" onclick="getFilter(this)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fa fa-filter f_7" aria-hidden="true"></i>&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </th>&nbsp; </thead></table>

Answer 2

您可以使用closestjQuery 的方法来获取th列，然后使用它的属性column-indexfunction getFilter(e){&nbsp; &nbsp; var evID = $(e).closest("th").data('column-index');&nbsp; &nbsp; console.log( evID );}