Jquery access attributes where the data attribute is substring

Question

Thanks a million for taking the time to read this :) First let me show you the example code I am dealing with:

<div id="section-0000001" class="section" data-section-223344="{"id":"123456", "type":"product"}">
  <div>Section 0000001</div>
</div>
<div id="section-0000002" class="section" data-section-223344="{"id":"123456", "type":"category"}">
  <div>Section 0000002</div>
</div>
<div id="section-123456" class="section" data-section-223344="{"id":"123456", "type":"showcase-product"}">
  <div>Section 123456</div>
</div>
<div id="section-234567" class="section" data-section-223344="{"id":"234567", "type":"showcase-product"}">
  <div>Section 234567</div>
</div>
<div id="section-345678" class="section" data-section-223344="{"id":"345678", "type":"showcase-product"}">
  <div>Section 345678</div>
</div>
<div id="section-0000003" class="section" data-section-223344="{"id":"123456", "type":"image"}">
  <div>Section 0000003</div>
</div>

What I want to achieve, is to add a class to all divs with the type 'showcase-product'. I do not have access to the original code so I need to do this with Jquery. There is unfortunately not a unique class to filter these out and the only thing unique is the showcase-product but as you can see that is part of an object within the data attribute and I cannot figure out how to access it.

If the attribute data-section-xxxxxx was the same, this would be much easier but each div has a unique value on the end but the first part data-section- is always the same.

I can loop through the divs with this:

$('.section').each(function(){
    for(data in $(this).data())
        console.log(data); 
});

But I cannot figure out a way to filter out only the divs with type = showcase-product.

I also tried a different approach:

$( ".section" ).each(function( i ) {
    element=this;
    $.each(this.attributes, function() {
       if(this.name.indexOf('data-section') != -1) 
           $(element).addClass("myClass");
    });
});

This adds the class but it also adds it to the ones without type = showcase-product such as type = image or type = category.

I guess it might be something like

this.name.type.value.indeOf('data-section') != 1

But I am not sure of the correct syntax or how to access it especially since type is not the value, it's an object within the value.

Any help appreciated.

Niklas · Accepted Answer · 2020-06-29 17:23:08Z

See this approach; what it does is explained in the comments:

$(".section").each(function(i, element) {
  // get dataset values
  var dataValues = Object.values(element.dataset);
  // find if has type using a regular expression
  var foundType = false;
  for (var j = 0; j < dataValues.length; j++) {
    if (dataValues[j].match(/\"type\":\"showcase-product\"/)) {
      foundType = true; // one dataset value matched!
    }
  }
  // skip this element if no match
  if (!foundType) return;
  // do your stuff with showcase-product here:
  console.log(element, 'found!');
  $(element).addClass("myClass");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section-0000001" class="section" data-section-223344='{"id":"123456", "type":"product"}'>
<div>Section 0000001</div>
</div>
<div id="section-0000002" class="section" data-section-223344='{"id":"123456", "type":"category"}'>
<div>Section 0000002</div>
</div>
<div id="section-123456" class="section" data-section-223344='{"id":"123456", "type":"showcase-product"}'>
<div>Section 123456</div>
</div>

Collectives™ on Stack Overflow

Jquery access attributes where the data attribute is substring

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related