Javascript array from all elements with a certain class name

Question

I am trying to make an array from elements with a certain class in my web page. The array should get the videofile attribute value from all a tags with the class videoLink.

The final values in the array should be.

 cycling_large, ocean_medium, winecountry_part1



 <a class="videoLink"  videofile="cycling_large"  ></a>
 <a class="videoLink" videofile="ocean_medium" ></a>
 <a class="videoLink" videofile="winecountry_part1" ></a>

I tried this but, does not work.

var values = $('.videoLink').map(function() { return this.attr('videofile'); }).get();

Thanks in advance.

videofile? I think you mean data-videofile... :P

Šime Vidas
– Šime Vidas

2011-11-02 23:53:25 +00:00
Commented Nov 2, 2011 at 23:53 — Šime Vidas
– Šime Vidas, Commented Nov 2, 2011 at 23:53

Raynos · Accepted Answer · 2011-11-03 00:09:41Z

6

var links = document.getElementsByClassName("videoLink");
var values = [].map.call(links, function (el) {
  return el.getAttribute("videofile");
});

Because you don't jQuery for simple things.

Browser support:

edited Nov 3, 2011 at 0:09

answered Nov 2, 2011 at 23:49

Raynos

170k57 gold badges359 silver badges399 bronze badges

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

3 Comments

wsanville Over a year ago

You will however, need to define the array.map prototype if you want this to support IE 8 and earlier, same with document.getElementsByClassName. See developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…

Raynos Over a year ago

@wsanville yes. But there are shims for that.

Šime Vidas Over a year ago

No need for slice - just [].map.call( links, function ( el ) { ...

Will · Accepted Answer · 2011-11-02 23:48:23Z

1

Change return this.attr('videofile'); to return $(this).attr('videofile');. You need to enclose the this in $() so it becomes a jQuery object that you can then call attr() on.

Example: http://jsfiddle.net/r9xJn/

answered Nov 2, 2011 at 23:48

Will

20.3k7 gold badges49 silver badges48 bronze badges

Comments

wsanville · Accepted Answer · 2011-11-02 23:49:04Z

0

var result = $.map($('a.videoLink'), function(a) {
   return $(a).attr('videofile');
});

Working example: http://jsfiddle.net/hY6zM/

answered Nov 2, 2011 at 23:49

wsanville

37.6k8 gold badges78 silver badges102 bronze badges

3 Comments

wsanville Over a year ago

If you look at the output in Firebug, or in the IE developer toolbar, or in Chrome, you'll see console.log will print ["cycling_large", "ocean_medium", "winecountry_part1"]

user973671 Over a year ago

How could I then store something like this in the array? video/'+ videofile +'.mp4

wsanville Over a year ago

Change the return statement to: return 'video/' + $(a).attr('videofile') + '.mp4';

Collectives™ on Stack Overflow

Javascript array from all elements with a certain class name

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related