Find all instances of a class, create array of a data attribute

Question

I have some code:

<div class="product-images hide" data-color="Red">…</div>
<div class="product-images hide" data-color="Blue">…</div>
<div class="product-images hide" data-color="Green">…</div>

How do I get all the data-color values into an array that I can compare against?

Suppose the Active Color is Red, then the script would say if active.value == data-color, remove class "hide"

Is this two questions? What does the array have to do with finding the instance with the active color? — Barmar
– Barmar, Commented Nov 15, 2018 at 0:15
I guess nothing @Barmar! I just wasn't sure if you needed an array or not :) — Jony
– Jony, Commented Nov 15, 2018 at 0:43

Gutelaunetyp · Accepted Answer · 2018-11-15 00:21:57Z

2

$(function() {
  var colors = $('.product-images').toArray().map(function(prod) {
    return $(prod).data('color');
  });
  console.log(colors);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="product-images hide" data-color="Red">…</div>
<div class="product-images hide" data-color="Blue">…</div>
<div class="product-images hide" data-color="Green">…</div>

If you want to use a specific color and remove the hide class for all of the products that have these data-color value, use this:

$(function() {
  var activeValue = 'Red';
  $('.product-images[data-color=' + activeValue + ']').removeClass('hide');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="product-images hide" data-color="Red">…</div>
<div class="product-images hide" data-color="Blue">…</div>
<div class="product-images hide" data-color="Green">…</div>

edited Nov 15, 2018 at 0:21

answered Nov 15, 2018 at 0:05

Gutelaunetyp

1,8824 gold badges23 silver badges43 bronze badges

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

1 Comment

Jony Over a year ago

Thanks @Gutelaunetyp ! In the second option, how would you add the class back once there is a new activeValue? went from Red to Blue?

Jack Bashford · Accepted Answer · 2018-11-15 00:35:04Z

You can just iterate over each element with the class, and make an array:

var colors = [];
var divs = document.querySelectorAll(".product-images.hide");
[].forEach.call(divs, function(elem) {
    colors.push(elem.getAttribute("data-color"));
})
console.log(colors);

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="product-images hide" data-color="Red">…</div>
<div class="product-images hide" data-color="Blue">…</div>
<div class="product-images hide" data-color="Green">…</div>

And to answer your second question, to remove the .hide class from the correct element:

var activeColor = "Red";
$(`div['data-color'=${activeColor}`).removeClass("hide");

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="product-images hide" data-color="Red">…</div>
<div class="product-images hide" data-color="Blue">…</div>
<div class="product-images hide" data-color="Green">…</div>

Collectives™ on Stack Overflow

Find all instances of a class, create array of a data attribute

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related