jQuery - Iterating a API command over several objects but via unique ID?

Question

I have a stack of vimeos on a page, I want to make them all mute though as they will be playing simultaneously.

I've got it working on only one vimeo. As it needs the unique ID for each vimeo. But I'm not interested in doing different things to the videos. I just want to give them one rule, and obviously not have to write it out each time I upload a new vimeo.

var iframe = document.getElementById("player_1");
iframe.api("api_setVolume", 50);

I tried making all the vimeo's ID = player_1, but that doesn't work. For some reason there's no getElementByClass in JS, there should be no? It'd be useful for things like this.

Any help would be greatly appreciated. Thanks.

Here's the testpage

Answer 1

Since this is tagged jQuery, I'll give you a solution that should work for that, though I haven't tried messing with iframe classes.

Add class="vimeo" to the iframes. Iterate through them with the following:

$(".vimeo").each(function() {
    this.api("api_setVolume",50);
});

each will iterate through all the elements that are matched by the selector (in this case, vimeo).

EDIT

Since jQuery doesn't seem to like messing with iframes, there's a more programmatic way of doing what's already working for you:

var player_count = 2;
for (var i = 1; i < player_count+1; i++) {
    var iframe = document.getElementById("player_" + i);
    iframe.api("api_setVolume", 50);
    //put other global rules here...
}

The trick now is determining what player_count should be.

Answer 2

jQuery will let you select a set of elements by class with the syntax: $(".myClass")

http://api.jquery.com/class-selector/