在没有很多 jQuery 请求的情况下获取传递的元素属性和属性

Posted 2023-05-09

【中文标题】在没有很多 jQuery 请求的情况下获取传递的元素属性和属性

【英文标题】：Get passed element properties and attributes without many jQuery requests

【发布时间】：2017-05-02 06:13:23

【问题描述】：

我有一些带有列表元素的列表，每个列表元素都有许多自定义属性，例如data-user-id、data-avatar 等。在每个列表元素上，我都附加了一个像这样的 jQuery 点击事件

$('*.friendListItem').on('click', function () 
    var userId = this.something;
    var avatar = this.foo;

现在，由于我在 this 对象中拥有了所需的所有属性和属性的传递元素，因此我正在寻找访问它们的最佳方式，因为使用 $(this).attr('data-user-id); 会导致不必要的 DOM遍历。

我现在能想到的使用纯javascript的唯一方法就是这样

this.attributes['data-user-id'].nodeValue

这似乎不是很好和最佳的。

有没有更好的方法来做我想做的事？

【参考方案1】：

您可以使用Element.dataSet 属性。

var userId = this.dataset.userId; //data-user-id

注意：对于带连字符的属性，将使用 camelCase。

$('span').click(function() 
  console.log(this.dataset.userId)
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-user-id="10">Click me<span>

【讨论】：

meh，我可以通过更多的调试发现，谢谢:) 将标记为答案