如何在JavaScript中獲取數組的第n個元素？

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）？

Answer 1

使用eq（） 。 Reduce the set of matched elements to the one at the specified index.

$('a[data-example]').eq(2).text();

小提琴

Answer 2

嘗試這個：

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

見：eq

Answer 3

您也可以使用psuedo選擇器 。 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);
}

工作小提琴

Answer 6

在此，通常可以使用的功能。

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

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

的jsfiddle