jQuery 1.8.1 data() error retrieving HTML5 data-attribute

Question

I'm trying to extract the FIRST data attribute from the following mark-up:

<button class="buttonMiddle" data-vid="1">
    <a href="#">who helped them</a>
</button>

<button class="buttonMiddle" data-vid="2">
    <a href="#">who helped them</a>
</button>

the JS I've conjured is:

var button1 = $('.buttonMiddle').get(0).data('vid');

console.log(button1);

Chrome's console gives me this:

Uncaught TypeError: Object # has no method 'data'

I've covered the basic troubleshooting --> jQuery is loaded before this js file, they are both loaded just before the closing body tag (so no need for $(function() {// find data-attribute}); .

Answer 1

尝试在此处使用eq（）而不是get() ：

var button1 = $('.buttonMiddle').eq(0).data('vid');