2010-06-06 138 views
9

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

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

我在寻找:["data-type", "data-sort"]作为数组。

任何人都知道如何做到这一点?

谢谢。

回答

20

您可以通过使用.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的具体可言,所以如果需要的话,你可以很容易地将其彻底删除。

+0

非常感谢。 :) – Mark 2010-06-06 15:51:58

0

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

对不起,就问读取之前的整个问题: - /不认为有一个内置的功能,让他们作为一个数组,拿到第一,获得第二个,然后建立数组手动。

3

只是针对使用jQuery的参考,属性与“数据 - ”起可以通过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验证对您很重要,那么这可能是一个可行的选择。