Loop through a set of elements jQuery

Question

I'm trying to loop through 12 classes, named .video-link0 through video-link11, where each one gets the treatment:

$('.video-link[n]').click(function() {
    $('.video-link[n]').addClass('show');
});

Essentially, I want the following behavior:

When .video-link1 is clicked, addClass('show') to video-link1

When .video-link2 is clicked, addClass('show') to video-link2

and so on, as if I had 12 functions that looked like this:

$('.video-link1').click(function() {
    $('.video-link1').addClass('show');
});

$('.video-link2').click(function() {
    $('.video-link2').addClass('show');
});

... and so on

I want to write a single loop that replaces the need to write this out as 12 separate cases.

The following does not yield the result I'm looking for:

var elems = 12;

for(var i = 0; i < elems; i++){
    $('.video-link' + i).click(function() {
        $('.video-link' + i).addClass('show');
    });
};

** UPDATE **

This is not a duplicate question, or else the above question referenced does not address my requirement. I am not trying to move up and down the DOM with next. Rather, I want to write a single loop that iterates through 12 classes numbered 0-11 using i to enumerate the cases.

** UPDATE **

This works for me, and is using a suggestion by Lloyd Banks (I needed the i enumerator PLUS the this keyword):

for (var i = 0; i < 12; i++) {
    $('.video-link'+i).click(function() {
      $(this).addClass('show');
    });
  }

Does each element have the classes `video-link video-link[n]` or just `video-link[n]`? — Jesse Kernaghan, Jan 19 '16 at 18:10
`$(".yourClassName").each(function(){ $(this).addClass('show');});` — JonH, Jan 19 '16 at 18:12
So reference the current element, not all of them... `$(this).addClass(...)` The last code example is the infamous for loop. — epascarello, Jan 19 '16 at 18:13
@jesse-kernaghan, the classes are named `video-link[n]` as you suggest. — amoeboar, Jan 19 '16 at 18:28

score 2 · Answer 1 · answered Jan 19 '16 at 18:15

2

You can use starts with ^= selector and reference each with $(this)

$("[class^='video-link']").click(function() {
    $(this).addClass('show');
});

answered Jan 19 '16 at 18:15

Maxali

1,934
2
16
25

score 1 · Answer 2 · answered Jan 19 '16 at 18:13

1

You can use $(this) to reference the current (targeted) element inside of a event callback:

$('.video-link').click(function() {
    $(this).addClass('show');
});

answered Jan 19 '16 at 18:13

Jesse Kernaghan

4,544
2
18
25

I need a solution that calls `click` and `addClass` to classes named `video-link0` through `video-link11`. – amoeboar Jan 19 '16 at 18:25
@amoeboar I would suggest trying Maxali's answer, it should do what you need without needing any outside loop. – Jesse Kernaghan Jan 19 '16 at 18:27
This is not the optimal way to register an event listener using jQuery. You should always be using `.on` as opposed to `.click` for memory optimization and to add compatibility for dynamically created elements – Lloyd Banks Jan 19 '16 at 18:52

Lloyd Banks · Accepted Answer · 2016-01-19T18:29:47.490

0

You can use

function(numberOfElements){
    for(var i = 1; i <= numberOfElements; i++){
        $('.video-link' + i).on('click', function(){
            $(this).addClass('show');
        });
    }
}

You should also be using the .on binding event instead of .click. If you are generating your element after initial page load and use .click, the event handler wouldn't be registered.

edited Jan 19 '16 at 18:29

answered Jan 19 '16 at 18:16

Lloyd Banks

35,740
58
156
248

`.on('click', func)` and `.click(func)` work the same way, one is just a shorthand for the other. – Jesse Kernaghan Jan 19 '16 at 18:20
@lloyd-banks, I did in fact name my classes video-link1, video-link2, etc. I need a solution that accounts for this. – amoeboar Jan 19 '16 at 18:24
@amoeboar I went ahead and made changes to accommodate that – Lloyd Banks Jan 19 '16 at 18:31
2

@JesseKernaghan You ***need*** to use `.on` if you are dynamically adding elements on your DOM. Downvoting someone's answer when you are clearly wrong makes you look like a clown – Lloyd Banks Jan 19 '16 at 18:33
@LloydBanks Not sure what to tell you, it's one of the first lines of the docs: "This method is a shortcut for .on( "click", handler )" http://api.jquery.com/click/ – Jesse Kernaghan Jan 19 '16 at 18:40
2

@JesseKernaghan http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click/11878976#11878976 – Lloyd Banks Jan 19 '16 at 18:45

Loop through a set of elements jQuery

3 Answers3