How to get the nth element of an array in javascript?

Question

Supposing I have the following javascripts inserted in my HTML code...

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

How do I get the value of data-example in the 3rd link (Example #3)?

document.querySelectorAll('a')[2].dataset.example is one way in pure JS — Xotic750
– Xotic750, Commented Jun 5, 2015 at 15:27
It's very easy to write the code if you have a static or constant index number of the array.. But what if you don't.. like document.querySelectorAll('a')[n].dataset.example — AWC
– AWC, Commented Jun 5, 2015 at 15:47
All of the answers given below are also based on static markup/array index number. That is what your question specifically asks. If it is not static then you need some method other than an index to be able to find what you are looking for, the same with all the answers below. So what is it you really want? — Xotic750
– Xotic750, Commented Jun 5, 2015 at 16:04
Yes you should specify in your question if the content is static or dynamic. Provide static content, and you will get a static answer. :) — wrxsti
– wrxsti, Commented Jun 5, 2015 at 17:03

Balachandran · Accepted Answer · 2015-06-05 15:17:49Z

3

use eq(). Reduce the set of matched elements to the one at the specified index.

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

Fiddle

edited Jun 5, 2015 at 15:17

answered Jun 5, 2015 at 15:17

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

George Over a year ago

The way I read, the OP wants the value of the data-example attribute. I could be wrong.

haim770 · Accepted Answer · 2015-06-05 15:19:05Z

1

Try this:

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

See :eq

answered Jun 5, 2015 at 15:19

haim770

49.2k7 gold badges113 silver badges139 bronze badges

Comments

wrxsti · Accepted Answer · 2015-06-05 15:19:22Z

1

You could also use psuedo selectors. DEMO

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

answered Jun 5, 2015 at 15:19

wrxsti

3,4941 gold badge21 silver badges30 bronze badges

Comments

sports · Accepted Answer · 2015-06-05 15:23:23Z

I suggest you not to rely on "getting all the anchors that have data-example on it", but doing something more explicitly, like specifying a class for these links:

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

And then, using jQuery

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

Why the suggestion? because you might later have other links with data-example too

Mr_Green · Accepted Answer · 2015-06-05 15:23:44Z

0

If you want to show the value of data-example attribute, you can use :before or :after pseudo class in CSS.

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

Working Fiddle

answered Jun 5, 2015 at 15:23

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

Comments

oshell · Accepted Answer · 2015-06-05 15:36:43Z

0

Here a generally usable function for this purpose.

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

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

JSFiddle

answered Jun 5, 2015 at 15:36

oshell

9,1511 gold badge31 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to get the nth element of an array in javascript?

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related