通過jquery輸出HTML 5數據屬性

我試圖輸出一次點擊每個鏈接的data-id屬性，但是因爲兩個鏈接都有相同的href屬性，所以我的jquery選擇器只顯示'yahoo'，它是第一個鏈接的屬性。任何更好的想法？通過jquery輸出HTML 5數據屬性

<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'));

來源

2013-06-19 user1336103

他們爲什麼有相同的href？ – KyleK

不知道爲什麼？但有沒有更好的解決方案？ – user1336103

是的，也許只是給他們一個普通的班級？因爲他們將不會在現實生活中共享相同的href ....例如下面 – KyleK

使用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>

來源

2013-06-19 16:09:22 shanonvl

它的工作原理，可以將另一個'單詞'添加到控制檯...我嘗試了一些像console.log（'新詞'+ el.data（'id'））;但比它一次輸出所有鏈接.. – user1336103

應該工作; 'data'方法返回一個字符串，所以應該是標準字符串連接...參見jsfiddle：http://jsfiddle.net/shanonvl/pAjSp/ – shanonvl

你試圖讓的data-id所有元素與href="#test"？在這種情況下，你將能夠做到：

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

來源

2013-06-19 16:08:38

雖然這是有幫助的:)雖然這是有幫助的:) OP特別指出....'每個鏈接的ID一旦點擊' – KyleK

我沒有想到這一點。那麼這個答案是完全不相關的。 –

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

將只授予第一次出現

試試這個

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

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

來源

2013-06-19 16:08:51

您的解決方案一次輸出所有鏈接，而不是單獨鏈接每個鏈接 – user1336103

是的，在這裏你去...

$("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')); 
});

來源

2013-06-19 16:09:10 KyleK

它每輸出一個鏈接都會輸出一個額外鏈接 – user1336103

這是什麼意思？ – KyleK

似乎對我工作很好.... http：//jsfiddle.net/hGyAA/1/ – KyleK

通過jquery輸出HTML 5數據屬性

回答

相關問題