jquery create a unique id

Question

$(document).ready(function() {
  $('a.menuitem').click(function() {
      var arr = 0;
      var link = $( this ), url = link.attr( "href" );
      var newDiv = $( document.createElement( 'div' ) )
      $( "#content_pane" ).append( newDiv );
      newDiv.load( url );
      return false;
  });
});

As you can see I am creating a div and adding some content to it, how would I give each div that is created a unique id, something like section1, section2, section3, etc?

Why do you need this? Can't you pass the node around instead of its ID? — strager, Nov 29 '09 at 23:22
I need it becuase if I just have it creating
then I have no way of getting the correct div when it comes to be deleted — Udders, Nov 29 '09 at 23:53
@sico87: strager brings up a valid point. There are nicer ways than creating phony `id` values. If you don't like saving a reference to the element, how about using its position within its parent as an index into the list of divs you're creating here? — Crescent Fresh, Nov 30 '09 at 00:09
Some commonly third party libraries only accept an element ID (& sadly not a reference - limiting with SaaS scripts). mar10's suggestion below (for jQuery 1.9+) is ideal in that case. — Iain Collins, Jun 12 '13 at 21:06

score 25 · Accepted Answer · answered Nov 29 '09 at 23:18

Just use a counter:

var section = 1;
$(function() {
  $("a.menuitem").click(function() {
    ...
    $("<div></div>").attr("id", "section" + section++).appendTo("#content_pane");
    ...
    return false;
  });
});

Also, I'd suggest creating the element as per above.

mar10 · Answer 2 · 2013-08-20T14:33:34.087

17

Starting with jQuery 1.9 UI there is a $().uniqueId() function, that sets a unique id attribute (if no id is already defined):

http://api.jqueryui.com/uniqueId/

(Note that this requires jQueryUI on top of jQuery.)

edited Aug 20 '13 at 14:33

answered May 14 '13 at 19:08

mar10

14,320
5
39
64

Thanks, this is perfect, I didn't know about this function. Use case: Integration with 3rd party map library that requires an element ID to be passed. With this I can just loop for each element which I've tagged as being a map and call this to assign ID's to them to then pass to the map libs init method. – Iain Collins Jun 12 '13 at 21:04
That's jQuery UI, a user interface library running on top of jQuery. – Simon Kjellberg Aug 19 '13 at 09:55
You're right, thanks, I will edit the answer to make this more clear – mar10 Aug 20 '13 at 14:32

score 3 · Answer 3 · answered Jun 04 '12 at 19:56

3

Now that Backbone.js has gained popularity, if you include it you automatically have access to Underscore just use: Underscore: uniqueId.

Or include it by itself, it's pretty lightweight and has some great functions

answered Jun 04 '12 at 19:56

Clarence Liu

3,874
2
25
29

score 3 · Answer 4 · answered Nov 29 '09 at 23:58

3

You shouldn't need to do this. If you can store the id in a variable, you could store the element itself (well, a reference to the element) in a variable too.

answered Nov 29 '09 at 23:58

nickf

537,072
198
649
721

It is not practiacal to store the reference to the div object in some situations. – BYK Nov 30 '09 at 00:04
2

such as? my point is that you're going to be storing and passing around a string, just so you can get a reference to an element, you might as well pass the element itself. – nickf Nov 30 '09 at 00:31
How would I create multiple DIV's onclick in multiple variables? I need this beuase it is the only way, I could think of removing the element from the page onclick of a link – Udders Nov 30 '09 at 08:59
4

multiple variables? https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Array – nickf Nov 30 '09 at 09:21

jquery create a unique id

4 Answers4

Linked

Related