Set unique ID for multiple elements using jQuery

In this post I am going to explain, how we can set unique ID for multiple elements at once. Let’s say we have a HTML markup like this:

<div id="parent2" class="parent">
    <span>11</span>
    <span>12</span>
    <span>13</span>
    <span>14</span>
    <span>15</span>
    <span>16</span>
</div>

Now, we need to set unique ID’s for all the <span> inside the container div “parent2”. So, our desired result is something like this:

<div id="parent2" class="parent">
    <span id="span0">11</span>
    <span id="span1">12</span>
    <span id="span2">13</span>
    <span id="span3">14</span>
    <span id="span4">15</span>
    <span id="span5">16</span>
</div>

Now, we can achieve this using jQuery like this:

var $span = $("#parent2 span");
$span.attr('id', function (index) {
    return 'span' + index;
});

Explanation:

  1. Code in the first line
    var $span = $("#parent2 span");
    

    Now the above code is used to get all the span’s inside the div element with the id as `parent2`.

  2. Code in the second line
    $span.attr('id', function (index) {
    

    The above code is used to set the id attribute using the function. Here’s index is the position of the <span> in the set. It’s actually an integer indicating the position of the first element within the jQuery object relative to its sibling elements, which is unique.

  3. Code in the thrid line
    return 'span' + index;
    

    Returns a new ID which is the return value for the above function. It internally loops through all the spans and set the new ID. For example, for the first span, the index is zero, so the returned ID is as  span0  and similarly the next one would be  span1  and so on.

Demo:

  • Working Demo on jsFiddle #1
    ( In Chrome, right-click and ‘Inspect element’ on the second container. In console, you would be able to see unique ID’s being set for all the spans. )
  • Working Demo on jsFiddle #2
    ( In this fiddle demo, I have set the span text as its ID, so that we can easily see the ID’s that have been set using jQuery. )

If you have any comments or suggestion about this post, I would really appreciate it.

Happy Coding 🙂

Advertisements

7 thoughts on “Set unique ID for multiple elements using jQuery

  1. Omg! Thank you so much for this Palash! i do have a question though. when the ids are already set how would we call them? for example ive got 4 buttons.

    button1, button2, button3, button4

    these 4 buttons clone a div (so one div each) and the buttons of course can clone multiples of that one div and i want to implement ur method of setting unique ids to them when they are cloned. how would i then be able to call (for maybe to drag that div around or something)them not knowing before hand their ids?

  2. Pretty sure you just saved my project with this post. Thank you so much. Exactly what I needed. Seems so simple, but I was having the hardest time and was making it wayyyyy too complicated. You rock.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s