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

Posted

技术标签:

【中文标题】在没有很多 jQuery 请求的情况下获取传递的元素属性和属性【英文标题】:Get passed element properties and attributes without many jQuery requests 【发布时间】:2017-05-02 06:13:23 【问题描述】:

我有一些带有列表元素的列表,每个列表元素都有许多自定义属性,例如data-user-iddata-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,我可以通过更多的调试发现,谢谢:) 将标记为答案

以上是关于在没有很多 jQuery 请求的情况下获取传递的元素属性和属性的主要内容,如果未能解决你的问题,请参考以下文章