Assigning ids to existing div using jquery

Question

I am trying to assign ids to my div on the page the div's are not created dynamically but are once written on the page and i need to assign random id's to those div that exist on my page. tried many thing but was unable to get solution.. And on the html page the div exists in the class called demo and to the div's i have assigned id=mydiv. And later the script is called and divs id is changed to random number from mydiv.. i am unable to add +1 to the next div. Tried jquery traversing as shown below nextall() but it doesnt add the +1 to the new div..

function handledivIds() {
    var e = $(".demo #mydiv");
    var t = randomNumber();
    var n = "div-",t;
    e.attr("id", n);    
    e.nextall().attr("id", n+1)
    }

function randomNumber() {
    return '' + new Date().getTime();
}

And guys how unique ll that random number() generate or any changes — user3787062
– user3787062, Commented Jun 29, 2014 at 4:15

Deryck · Accepted Answer · 2014-06-29 03:57:59Z

2

Try changing this

var e = $(".demo #mydiv");

to this

var e = $(".demo div");

ID only works for one element so #myDiv is only going to return one of the div elements...ever.

Also incorporate Jai's answer.

answered Jun 29, 2014 at 3:57

Deryck

7,6662 gold badges27 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shaunak D · Accepted Answer · 2014-06-29 04:17:02Z

1

Demo

n+1 wont work for string, all the next divs will get same Ids with .nextAll().
Also concatenate using + - var n = "div-"+t;
Use .each() to iterate over div elements.

Try this,

function handledivIds() {
    var e = $(".demo div");
    var t = randomNumber();

    e.each(function (index) {
       $(this).attr("id", "div-" + (t + index))
    });
}

function randomNumber() {
    return '' + new Date().getTime();
}

edited Jun 29, 2014 at 4:17

answered Jun 29, 2014 at 3:59

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

1 Comment

Shaunak D Over a year ago

@user3787062, Jai was the first to answer and point the mistake. You should accept his answer. The problem was mainly in concatenation.

Jai · Accepted Answer · 2014-06-29 04:03:16Z

0

change this:

var n = "div-",t;

to this:

var n = "div-";

May be you want to concatenate the string here and in your nextAll() you are appending 1 to that string.

Or you can update your function to this:

function handledivIds() {
    $(".demo div").each(function(i, it){
        $(this).attr('id', "div-"+$(this).index()); // assigns unique ids per div
    });
}

edited Jun 29, 2014 at 4:03

answered Jun 29, 2014 at 3:56

Jai

74.8k12 gold badges77 silver badges104 bronze badges

2 Comments

user3787062 Over a year ago

and how do i assign the first one ;

Jai Over a year ago

then var n = "div-"; change this.

tvanfosson · Accepted Answer · 2014-06-29 04:47:24Z

0

First - using the date is not random. It will provide predictably increasing values. If you need something truly random, you'd be better off assigning the DIV ids server-side with an actual random number generator. If you can live with pseudorandom numbers, use Math.random instead of the time. To guarantee uniqueness you can use both the time and a random number. The inclusion of the time, since it's monotonically increasing, will guarantee unique values, while the pseudorandom number will give it the random quality. If you need truly random, use a cryptographically strong random number generator server-side.

Second, your original divs cannot all have the same starting id. Better to give them a class server-side then use that class to identify them.

 <div class="needs-random-id"></div>

Lastly, nextAll applies the same attribute to all the matching elements. You probably want to use each

  var max = 9007199254740990;
  var min = 1;
  $('div.needs-random-id').each(function() {
      var time = new Date().getTime();
      var idValue = 'div-' 
                       + time + '-' 
                       + Math.floor(Math.random() * max) + min;
      $(this).attr('id', idValue);
  });

edited Jun 29, 2014 at 4:47

answered Jun 29, 2014 at 4:05

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

1 Comment

tvanfosson Over a year ago

@user3787062 - it would take some work to make sure they are unique - they're random so you can't guarantee. One potential solution would be to concatenate the current time with a random number, making a compound id that would be unique. I'll update. Again, though, they are only pseudorandom, not truly random. If you need truly random do it serverside with a cryptographically strong random number generator.

Collectives™ on Stack Overflow

Assigning ids to existing div using jquery

4 Answers 4

Comments

Demo

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related