dynamically replace same div ids with unique ids

Question

I was wondering if there's simple JS/JQuery to change the div ids inside the container from 'one' to unique ids (like 'one_1', 'one_2', 'one_3')

<div id="container">
  <div id="one">ONE</div>
  <div id="one">ONE</div>
  <div id="one">ONE</div>
</div>

Desired Output

<div id="container">
  <div id="one_1">ONE</div>
  <div id="one_2">ONE</div>
  <div id="one_3">ONE</div>
</div>

I've gotten so far as to extract the three divs, but now need to replace the text:

document.getElementById("container").querySelectorAll("#one")

If you've got the list of three divs, just loop over them and set their `id` properties. — Heretic Monkey, Dec 27 '19 at 16:51
I can change the 'one' from id to class if that makes it easier to create unique IDs, but i don't know how to then change the properties from 'one' to 'one_1' etc etc. I can't update the source code and the number of inside divs will be changing dynamically — MayaGans, Dec 27 '19 at 16:53
https://stackoverflow.com/questions/12889362/difference-between-id-and-class-in-css-and-when-to-use-it — jvk, Dec 27 '19 at 17:14

score 2 · Answer 1 · answered Dec 27 '19 at 16:52

2

You could just loop over the container's children and update their IDs:

var children = document.getElementById('container').children;
for (var i = 0; i < children.length; i++) {
  var child = children[i];
  child.id = child.id + "_" + (i + 1);
}

answered Dec 27 '19 at 16:52

Alexander van Oostenrijk

4,644
3
23
37

I actually like this best. no jQuery, simple and to the point. of course OP is using jQuery so it is only a matter of taste. – NappingRabbit Dec 27 '19 at 17:28

Kamran · Answer 2 · 2019-12-27T17:09:29.410

1

jQuery solution:

$("#container div").each(function( index ) {
 this.id = this.id+"_"+(index+1);
});

Single line (thanks to Andreas's comment)

$("#container div").attr("id", (index, oldId) => oldId + "_" + (index + 1))

edited Dec 27 '19 at 17:09

answered Dec 27 '19 at 16:54

Kamran

523
6
18

1

`.attr("id", (index, oldId) => oldId + "_" + (index + 1))` – Andreas Dec 27 '19 at 17:01

Jeto · Accepted Answer · 2019-12-27T17:09:33.247

You may use the version of .attr() which takes a function as its second parameter:

jQuery(($) => {
  $('#container > div').attr('id', (index, id) => `${id}_${index + 1}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="one">ONE</div>
  <div id="one">ONE</div>
  <div id="one">ONE</div>
</div>

Or, if you can't use ES6+ Javascript:

jQuery(function ($) {
  $('#container > div').attr('id', function (index, id) {
    return id + '_' + (index + 1);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="one">ONE</div>
  <div id="one">ONE</div>
  <div id="one">ONE</div>
</div>

Evik Ghazarian · Answer 4 · 2019-12-27T16:59:00.330

0

$(".changer").on("click",function(){
var i = 1;
$("#container").children().each(function(){
 var id = this.id;
 $(this).attr("id",(id + "_" + i));
 i++;
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="one">ONE</div>
  <div id="one">ONE</div>
  <div id="one">ONE</div>
</div>
<button class="changer">
Change IDs
</button>

edited Dec 27 '19 at 16:59

answered Dec 27 '19 at 16:56

Evik Ghazarian

1,803
1
9
24

dynamically replace same div ids with unique ids

Desired Output

4 Answers4