How can I write this JavaScript iteration function in jQuery?

Question

I have a JS function that returns a list of ".youtube" elements, loops through the selector, and calls another function. The JavaScript function is working beautifully, but I want to translate it into jQuery. Here's the JS function, which works correctly:

var videos = document.querySelectorAll(".youtube");
for (var i = 0; i < videos.length; i++) {
    getVideos(videos[i]);
}

Now here's my attempt at translating it into jQuery:

$(".youtube").each(function(i, youtube){
    getVideos(youtube[i]);
});

This doesn't work. Here's a JSFiddle: http://jsfiddle.net/k3y3yvxq/2/

Pranav C Balan · Accepted Answer · 2015-09-30 15:51:26Z

5

No need for index in jQuery each(), youtube refers to the element

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element. ( Taken from https://api.jquery.com/each/ )

$(".youtube").each(function(i, youtube){
    getVideos(youtube);
    // or getVideos(this);
});

edited Sep 30, 2015 at 15:51

answered Sep 30, 2015 at 15:48

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

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

1 Comment

ImmaGrumpyOldMan Over a year ago

Duh. I feel stupid now. I'll accept when timer runs out.

T.J. Crowder · Accepted Answer · 2015-09-30 16:05:40Z

3

You can also do it like this:

$(".youtube").get().forEach(getVideos);

...provided getVideos only looks at its first argument and not subsequent ones, as it will get called with three arguments: The element, its index, and the array we're looping over (which is what .get() gives us, a true JavaScript array).

Or the "less jQuery" way:

Array.prototype.forEach.call(document.querySelectorAll(".youtube"), getVideos);

I should note that forEach is ES5+ (e.g., circa 2009), so IE8 doesn't have it, as IE8 was released before the ES5 specification was finalized. All modern browsers do.

edited Sep 30, 2015 at 16:05

answered Sep 30, 2015 at 15:54

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

1 Comment

ImmaGrumpyOldMan Over a year ago

This is a very elegant solution, thanks for your input.

Collectives™ on Stack Overflow

How can I write this JavaScript iteration function in jQuery?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related