How to apply one function to multiple instances of a class

Question

I want to apply this 'coupon-clipping' function to multiple elements on this page without making a separate function for each different element. On the code snippet I added, it works for my first "Buy 4, Save $2.00" but not for the "4 Coupons".

From my research I know that this

var coupon1 = document.querySelector('.coupon1');

just returns the FIRST instance of the coupon1 but I need to figure out how to apply that function to ALL elements of that class (say 20 elements of the coupon1 class).

var coupon1 = document.querySelector('.coupon1');
var coupon2 = document.querySelector('.coupon2');

coupon1 ? coupon1
  .addEventListener('click', function() {
    coupon1.remove();
    coupon2.classList.remove('hide-coupon');
  }) : false;

<div class="coupon-product coupon1">
  <span id="coupon">Buy 4, Save $2.00</span>
</div>

<div class="coupon-product-clipped hide-coupon coupon2">
  <span id="clipped-coupon">Buy 4, Save $2.00</span>
</div>


<div class="coupon-product coupon1">
  <span id="coupon">4 Coupons</span>
</div>
<div class="coupon-product-clipped hide-coupon coupon2">
  <span id="clipped-coupon">4 Coupons</span>
</div>

`.querySelector()` is **not** a jQuery method; it's built-in to browsers. That said, you're looking for `.querySelectorAll()` which returns a list of elements. — Pointy, Mar 02 '18 at 18:47
If you get an array of elements, just iterate on each items. — Striped, Mar 02 '18 at 18:48

Ele · Answer 1 · 2018-03-02T19:03:27.860

2

You need to use document.querySelectorAll() and loop over the collection of elements to bind the click event.

document.querySelectorAll('.coupon1').forEach(function(elem) {
    elem.addEventListener('click', function() {...});
})

As @pointy mentioned, some enviroments don't support Array iteration methods on NodeList objects, so, you can use the function Array.from.

Array.from(document.querySelectorAll('.coupon1')).forEach(function(elem) {
    elem.addEventListener('click', function() {...});
})

Or something like this: Reference

var elements = document.querySelectorAll('.coupon1')
Array.from({ elements.length }, function(_, i) { return i}).forEach(function(index) {
    let elem = elements.item(index);
    elem.addEventListener('click', function() {...});
});

edited Mar 02 '18 at 19:03

answered Mar 02 '18 at 18:49

Ele

33,468
7
37
75

Aren't there some environments that don't support the Array iteration methods on NodeList objects? – Pointy Mar 02 '18 at 18:52
1

@Pointy yes, we can use use the function `Array.from` – Ele Mar 02 '18 at 18:55
Hmm...for some reason whenever I use any of those functions then NEITHER of the instance from my 'coupon1' class work... I am at a complete loss for why that doesn't work because the logic makes sense. Thank you for your answer! – mswift Mar 05 '18 at 21:16
I also have multiple instances of coupon2 so i wonder if i have to do some manipulating with that as well. but thank you for answering! – mswift Mar 05 '18 at 21:26

score 1 · Answer 2 · answered Mar 02 '18 at 18:54

1

$(".coupon1").each(function(idx, elem){
    elem.click(function()
    {
        ...
    });
});

answered Mar 02 '18 at 18:54

Emil

1,131
13
23

2

This works, but jQuery will iterate for you automatically; you don't need the `.each()` unless you need to do different things for each element. – Pointy Mar 02 '18 at 18:59

score 0 · Answer 3 · answered Mar 02 '18 at 18:55

$('.coupon1').click(function() { stuff here}) doesn't do the job?

You could imagine:

$('.coupon1').click(function() { 
   $(this).hide();
   $('.coupon2').show();
)})

or even with a common class 'coupon':

$('.coupon').click(function() { 
   $('.coupon1').toggle();
   $('.coupon2').toggle();
)})

to alternate but maybe not needed

Regard

score 0 · Answer 4 · answered Mar 02 '18 at 18:58

Apply to as many elements as you want using jQuery class selector, as such:

var elements = $(".coupon1")

Now you can bind click event, as such:

elements.click(function(){
    var clickedCoupon = $(this);
    var allOtherCoupons = $(".coupon1").not(this);
})

How to apply one function to multiple instances of a class

4 Answers4