CODEWITHSUNDEEP
javascriptphpjquery
Mia
Mia

Reputation: 443

jQuery generate unique IDs

Here's what I have: 

<a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a>

It's a PHP array, which contains some links. I need to add an extra hash parameter #nav-link to the end of each link.

Here's how I tried do it:

<a id="likeLink" href=""><?=$arItem["TEXT"]?></a>
<script>
    $(document).ready(function () {
        $("#likeLink").attr("href", <?=$arItem["LINK"]?> + "#nav-link");
    });
</script>

But this code doesn't work because jQuery will not know which links I am linking to. So I guess that I need to generate the unique ids, but don't know how to do it.

Upvotes: 19

Views: 70018

Answers (7)

Scott Jungwirth
Scott Jungwirth

Reputation: 6675

I didn't need a forever unique/random id, just something that was unique per page, and all of these solutions seemed overkill for me so I came up with this:

const uniqId = (() => {
    let i = 0;
    return () => {
        return i++;
    }
})();

// usage:
uniqId(); // 0
uniqId(); // 1
uniqId(); // 2
// ...

Upvotes: 40

Beri
Beri

Reputation: 11600

For generating random ids you could use this one.

<script type="text/javascript">
function Generator() {};

Generator.prototype.rand =  Math.floor(Math.random() * 26) + Date.now();

Generator.prototype.getId = function() {
   return this.rand++;
};
var idGen =new Generator();
</script>
</html>
<body>
<!-- Place this in the body of the page content -->

   <button onclick="console.log(idGen.getId())">click</button>

</body>

Upvotes: 18

DAB
DAB

Reputation: 1873

Since v1.9, jQueryUI has a builtin method for creating unique id's, called uniqueId().

This code will set a unique id on each element belonging to myclass. 

$(".myclass").each(function () {
    $(this).uniqueId();
});

Note that, in my testing at least, you cannot assign a new id, if the element already has one.

So this div would get a unique id with the above Javascript code

<div class="myclass"/>

But this wouldn't

<div class="myclass" id="myId"/>

See https://api.jqueryui.com/uniqueId/ for more information

Upvotes: 13

Sajjad Ali Khan
Sajjad Ali Khan

Reputation: 1813

We can create a unique id for the elements using uniqueId() in Underscore:

uniqueId

 _.uniqueId([prefix])

Generate a globally-unique id for client-side models or DOM elements that need one. If prefix is passed, the id will be appended to it.

_.uniqueId('contact_');
=> 'contact_104'

Upvotes: 4

Joe Johnston
Joe Johnston

Reputation: 2936

I know this is a year old now, however, the OP stated he did not know 'how' to apply the IDs. This can be accomplished easily using the rand prototype by beri above as used here.

/// insure ALL myClass elements have a unique ID. 
if(!$('.myClass').attr("id")){
    $('.myClass').attr("id",idGen.getId());
    console.log($('.myClass').attr("id"));
}

or using a much broader brush: 

/// insure ALL anchor tags have a unique ID. 
if(!$('a').attr("id")){
    $('a').attr("id",idGen.getId());
}

Upvotes: 2

Jim Ma
Jim Ma

Reputation: 729

I always use following code to generate unique ids. I've found this method several years ago on Stackoverflow:

 /**
 * Create a random Guid.
 *
 * @return {String} a random guid value.
 */
newGuid: function() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
    function(c) {
      var r = Math.random() * 16 | 0,
        v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    }).toUpperCase();
}

And you are able to find other useful js helpers in my library: https://github.com/mazong1123/neatjs

Upvotes: 9

Martin
Martin

Reputation: 675

Assuming that you call the code in some kind of loop, you could just replace

<a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a>

with

<a href="<?=$arItem["LINK"]?>#nav-link"><?=$arItem["TEXT"]?></a>

that way "#nav-link" is added at the end of each link. No javascript or jquery needed at all :D

Upvotes: 2

Related Questions