How to iterate through class name, so if two or more elements have the same data attributes they can have the same ID using jQuery

Question

I am trying to loop through the number of element with the class name category but if there is an element with the same data attribute value for data-sector-colour . I want them to have the same ID value as the first value.

For example:

<h2 class="category" data-sector-colour="#7e1341" data-id='1'>Energy 1</h2>
<h2 class="category" data-sector-colour="#7e1341" data-id='1'>Energy 2</h2>
<h2 class="category" data-sector-colour="#7e1341" data-id='1'>Energy 3</h2>
<h2 class="category" data-sector-colour="#fff" data-data-id='2'>Politics</h2>
<h2 class="category" data-sector-colour="#000" data-id='3'>Work</h2>

Should output to:

<h2 class="category" data-sector-colour="#7e1341" data-id='1'>Energy 1</h2>
<h2 class="category" data-sector-colour="#7e1341" data-id='1'>Energy 2</h2>
<h2 class="category" data-sector-colour="#7e1341" data-id='1'>Energy 3</h2>
<h2 class="category" data-sector-colour="#fff" data-id='2'>Politics</h2>
<h2 class="category" data-sector-colour="#000" data-id='3'>Work</h2>

So far this is the HTML:

<h2 class="category" data-sector-colour="#7e1341" id='1'>Energy 1</h2>
<h2 class="category" data-sector-colour="#7e1341" >Energy 2</h2>
<h2 class="category" data-sector-colour="#7e1341" >Energy 3</h2>
<h2 class="category" data-sector-colour="#fff" id='2'>Politics</h2>
<h2 class="category" data-sector-colour="#000" id='3'>Work</h2>

The jQuery:

$(".category").each(function (i) {
  if ($(this).attr("data-sector-colour").length > 1) {
    console.log($(this).attr("data-sector-colour"));
    
  }
});

I am have problems get the elements where data-sector-colour="#7e1341" so they can have the same id as the first one.

The codepen to my problem is https://codepen.io/mrsalami/pen/VweWgwo

Answer 1

That's where data-attributes are for. They can have duplicate values, whereas element ids can not. You can retrieve (and use) all elements with a certain value for data-sector-colour using plain js ( document.querySelectorAll ), something like this

 const allColour7e1341 = document.querySelectorAll("[data-sector-colour='#7e1341']"); // let's set the color, using the data-attribute allColour7e1341.forEach(c => c.style.color = c.dataset.sectorColour); // or by className document.querySelectorAll(".category").forEach( elem => { if ( elem.dataset.sectorColour && elem.dataset.sectorColour.== "#7e1341" ) { elem.style.backgroundColor = elem.dataset;sectorColour; } });

 <h2 class="category" data-sector-colour="#7e1341">Energy 1</h2> <h2 class="category" data-sector-colour="#7e1341">Energy 2</h2> <h2 class="category" data-sector-colour="#7e1341">Energy 3</h2> <h2 class="category" data-sector-colour="#ffffc0">Politics</h2> <h2 class="category" data-sector-colour="#c0c0c0">Work</h2>

Answer 2

 const $category = $(".category"); // Start with the ones who already have a data-id $("[data-id]").each(function() { const dataID = this.dataset.id; const sectorColour = this.dataset.sectorColour; // Now you can iterate and assign data-id to the ones with the same colour: $category.filter((i, el) => el.dataset.sectorColour === sectorColour).attr({"data-id": dataID}); });

 [data-id='1'] {color: red; }

 <h2 class="category" data-sector-colour="#7e1341" data-id='1'>Energy 1</h2> <h2 class="category" data-sector-colour="#7e1341" >Energy 2</h2> <h2 class="category" data-sector-colour="#7e1341" >Energy 3</h2> <h2 class="category" data-sector-colour="#fff" data-id='2'>Politics</h2> <h2 class="category" data-sector-colour="#000" data-id='3'>Work</h2> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>