通过Jquery输出HTML5数据属性

时间:2013-06-19 16:06:10

标签: jquery html5

我试图在点击后输出每个链接的data-id属性,但因为两个链接都有相同的href属性,所以我的jquery选择器只显示'yahoo',这是第一个链接的属性。有更好的想法吗?

<a href="#test" data-id="yahoo">yahoo.co.uk</a>
<a href="#test" data-id="google">Google.co.uk</a>

console.log($("a[href$='#test']").data('id'));

4 个答案:

答案 0 :(得分:2)

您是否尝试使用data-id获取所有元素的href="#test"?在这种情况下,您将能够:

$('a[href="#test"]').map(function() { return $(this).data('id'); });

答案 1 :(得分:2)

使用click处理程序。 this引用将是单击的dom元素。

<script>
   $("a[href='#test']").click(function(e) {
      // DOM element --> jQuery element
      var el = $(this);
      console.log(el.data('id'));
      e.preventDefault();
      return false;
   });
</script>

答案 2 :(得分:1)

console.log($("a[href$='#test']").data('id'));

只会给出第一次出现

试试这个

$("a[href$='#test']").each(function(){
    console.log($(this).data('id')); 
});

小提琴 http://jsfiddle.net/kGRVu/

答案 3 :(得分:1)

是的,你走了......

$("a[href^='#test']").click(function(e){
   e.preventDefault();
   console.log($(this).data('id'));

});

但不太可能你的链接实际上有相同的href ...所以我只是给他们一个公共类作为选择器......

 <a href="www.google.com" class="link" data-id="google">Google</a>

然后访问该类......

$("a.link").click(function(e){
   e.preventDefault();
   console.log($(this).data('id'));
});