Question

我正在寻找一种使用jquery来获取元素的自定义属性的方法。

<span id='element' data-type='foo' data-sort='bar'></span>

我希望得到：["data-type", "data-sort"]作为数组。

任何人都知道怎么做？

感谢。

Answer 1

您可以使用.attributes DOM property并循环播放，如下所示：

var arr = document.getElementById('element').attributes, attributes = [];
//or if you're inside a jQuery loop, just use this.attributes
//e.g.: var arr = $("span").get(0).attributes, attributes = [];
for(var i = 0; i < arr.length; i++) {
  if(arr[i].name.indexOf("data-") == 0) //only ones starting with data-
    attributes.push(arr[i].name);
}
alert(attributes); //use it for something, result is ["data-type", "data-sort"]

You can see a working demo here，除了抓取元素之外，这根本不是特定于jQuery的，因此如果需要，您可以轻松地将其完全删除。

Answer 2

仅供参考使用jQuery的人参考，data()函数可以访问以'data-'开头的属性：

<span id='element' data-type='foo' data-sort='bar'></span>

var el = $('#element');
return [el.data('type'), el.data('sort')];

有些浏览器开始以更高级的方式（本地数据存储？）存储它们，而其他浏览器则没有，但似乎工作得很好。请注意，W3C验证器不喜欢像这样的expando属性，但我认为有一些建议要对其进行标准化，以便它们进行验证。我最后一次研究使用元素存储数据的最佳方式，使用data-key这样的人才是专业人士之一。

另一种将数据绑定到元素的方法是在元素之前或之后插入脚本标记，为其提供text/javascript以外的类型，例如：

<script id="templatedata" type="text/html">
   <span>23</span>
   <span>Alfred</span> <!-- I'm sure you can get more creative than I'm being here -->
</script>

这不会显示在浏览器中，您仍然可以通过$('#templatedata').html();获取HTML。这可能仍有问题，因为从技术上来说这是不正确的，但如果W3C HTML验证对您很重要，那么它可能是一个可行的选择。

Answer 3

只是$('#element').attr('data-type');和$('#element').attr('data-sort');

抱歉，在阅读完整个问题之前回答： - /不要认为有内置功能可以将它们作为数组获取，获取第一个，获取第二个然后手动构建数组。

Answer 4

您可以使用此代码，搜索非常简单。只包括jquery没有其他.. Simple Jquery Filter

jquery获取属性

4 个答案: