Question

假设我的HTML代码中插入了以下javascripts ...

<a href="http://example.com" data-example="my example">Example #1</a>
<script src="http://example.com/javascript.js"></script>

<a href="http://example.com" data-example="my example">Example #2</a>
<script src="http://example.com/javascript.js"></script>

<a href="http://example.com" data-example="my example">Example #3</a>
<script src="http://example.com/javascript.js"></script>

如何在第3个链接中获取数据示例的值（示例＃3）？

Answer 1

使用 eq() 。 $rootScope.$on(...

Reduce the set of matched elements to the one at the specified index.

<强> Fiddle

Answer 2

试试这个：

var data = $('a:eq(2)').data('example');

请参阅:eq

Answer 3

您也可以使用psuedo selectors。 DEMO

$('a:nth-of-type(3)').data('example')

Answer 4

我建议您不要依赖“获取所有data-example上的锚点”，而是更明确地做一些事情，比如为这些链接指定class ：

<a class="my-link" href="http://example.com" data-example="my example">Example #1</a>
<script src="http://example.com/javascript.js"></script>

<a class="my-link" href="http://example.com" data-example="my example">Example #2</a>
<script src="http://example.com/javascript.js"></script>

<a class="my-link" href="http://example.com" data-example="my example">Example #3</a>
<script src="http://example.com/javascript.js"></script>

然后，使用jQuery

 $(".my-link:eq(3)").data("example")

为何提出建议？因为您以后可能还有data-example的其他链接

Answer 5

如果要显示data-example属性的值，可以在CSS中使用:before或:after伪类。

a:before {
    content: attr(data-example);
}

Working Fiddle

Answer 6

这是一个通用的功能。

function getEqData(selector, data, num){
    return $(selector).eq(num-1).data(data);
}

var data = getEqData('a', 'example', 3);
console.log(data);

<强> JSFiddle

如何在javascript中获取数组的第n个元素？

6 个答案: