1

I am required to use a specific plugin in Wordpress for a project. It outputs several DIVs, each with identical IDs.

However, I need to isolate them individually, so that I style them in CSS separately.

Normally I would either alter the PHP or use nth-child...but this plugin basically makes both of these options impossible...long (and frustrating) story.

So I am looking for a Javascript/jQuery solution that I can plug into a global .js file and execute using a $(document).ready statement after page load instead.

I just can't seem to figure it out. The js/jquery code would need to alter the html output by this plugin after it's finished loading. It would scan the page, locate each instance of #commonName, and append a number onto it OR add a class name to it. Doesn't matter how it's done, as long as each DIV becomes unique in name.

The plugin outputs something like this on the page (simplified):

<div id="commonName"></div>
<div id="commonName"></div>
<div id="commonName"></div>

I would like my Javascript or jQuery code to locate and change every instance of this ID, and turn it into this:

<div id="commonName" class="copy-1"></div>
<div id="commonName" class="copy-2"></div>
<div id="commonName" class="copy-3"></div>

Or this would be fine too:

<div id="commonName-1"></div>
<div id="commonName-2"></div>
<div id="commonName-3"></div>

Thanks for your help everyone!

  • 1
    ID should be unique and Class can be duplicate you have the other way around.`
    `     – guradio Jun 13 '18 at 01:54
  • Possible duplicate of [div class vs id](https://stackoverflow.com/questions/84378/div-class-vs-id) – guradio Jun 13 '18 at 02:02
  • I wrote my post wrong - ignore the ID in my sample code. The class names are what is a duplicate...I am in need of something in jquery that can locate all the duplicate class names and make them unique - perhaps by appending a number to it or something like that. –  Jun 13 '18 at 15:29
  • Guradio - yep makes sense, I wrote my sample code wrong. What you wrote is exactly what I need to have happen with jquery or javascript....That's actually how it is output right now, except the class names are all identical. I need a solution preferably in jquery/javascript that will append some numbers to make all the class names OR ids all unique,,,, –  Jun 13 '18 at 15:32

1 Answers1

0

This will take all of the ids that have the id value of commonName The using an each loop, we can change the id value using the attr function.

Hope this helps :>

$("[id='commonName']").each((i,el)=>$(el).attr('id','commonName-'+i))

console.log($("body").children())
body div {
  width: 50px;
  height: 50px;
  display: inline-block;
}


#commonName-0{
  background: red;
}

#commonName-1{
  background: green;
}

#commonName-2{
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="commonName"></div>
<div id="commonName"></div>
<div id="commonName"></div>
Gerardo BLANCO
  • 5,590
  • 1
  • 16
  • 35
  • Thanks Gerardo BLANCO -- you nailed it! Super elegant code by the way works flawlessly and outputs into the console commonName-0, commonName-1, commonName-3. I did have one quick question --- how would I go about replace these IDs with the new ones you prodiuced directly on the page instead of outputting into the console? –  Jun 13 '18 at 15:55
  • They actually change in the page. What you see in the console is the page status after the change. You can inspect the page to see this happening – Gerardo BLANCO Jun 13 '18 at 16:24
  • Added some css so you can see the ids change in the page. – Gerardo BLANCO Jun 13 '18 at 16:26