无法在JavaScript中设置元素ID，它始终是未定义的

Question

I want to have a function that generates ID's on the fly for a given jquery object, if it doesn't have one already. These ID's should then be used in future requests.

I came up with the code below, but it doesn't work. The ID's are never set. The commented out alert statement below always return undefined.

I always pass code like $(this) or $(options.el) as a parameter to substitute 'el'. Initially, the elements do not have explicitly ID set in HTML.

Any help would be appreciated, here's the code:

getElementId: function(el) 
{
   if(undefined == el.attr('id'))
   {
      el.attr('id',"anim-"+Math.random().toString().substr(2));
   }
   // alert(el.attr('id'));
   return el.attr('id');
},

Answer 1

Test the truthiness of the valued returned by .attr() , and make sure that el is actually a jQuery object.

getElementId: function(el) 
{
   if (!el.jquery)
   {
       el = $(el);
   }

   if(!el.attr('id'))
   {
      el.attr('id',"anim-"+Math.random().toString().substr(2));
   }
   // alert(el.attr('id'));
   return el.attr('id');
},

Depending on the attribute you're trying to retrieve, .attr() may return undefined or "" .

---

Other recommended cleanup:

getElementId: function(el) 
{
   if (!el.jquery)
   {
       el = $(el);
   }

   var id = el.attr('id');

   if(!id)
   {
      // make sure this ID hasn't actually been used before!
      do
      {
          id = "anim-"+Math.random().toString().substr(2);
      } while (!$('#' + id).length);
      el.attr('id', id);
   }

   return id;
},

You really need to make sure that you're not assigning an ID to that element which has already been used before. The above function does this. A simpler way to accomplish the same thing is to use an incrementing counter stored somewhere outside of the scope of the function:

__idCounter__: 1,
getElementId: function(el) 
{
   if (!el.jquery)
   {
       el = $(el);
   }

   var id = el.attr('id');

   if(!id)
   {
      id = "anim-" + (this.__idCounter__++);
      el.attr('id', id);
   }

   return id;
},

---

Last edit (I promise)

There seems to be confusion about what .attr() returns when an element does not have the attribute requested. After running some tests , it looks like .attr() returns:

• the empty string for at least id and class (perhaps other HTML4-spec attributes as well; didn't test)
• undefined for other attributes not defined by the spec

Output from my tests :

<div id="myID"/> id: myID
<div id="myID"/> class: 
<div id="myID"/> data-attr: undefined
<div id="myID"/> asdf: undefined

<div class="myClass"/> id: 
<div class="myClass"/> class: myClass
<div class="myClass"/> data-attr: undefined
<div class="myClass"/> asdf: undefined

<div data-attr="myAttr"/> id: 
<div data-attr="myAttr"/> class: 
<div data-attr="myAttr"/> data-attr: myAttr
<div data-attr="myAttr"/> asdf: undefined

<div asdf="myNonSpecAttr"/> id: 
<div asdf="myNonSpecAttr"/> class: 
<div asdf="myNonSpecAttr"/> data-attr: undefined
<div asdf="myNonSpecAttr"/> asdf: myNonSpecAttr

---

tl;dr

Just test the truthiness of the value returned by .attr() , since that treats undefined and "" (the empty string) the same:

if (somejQueryElt.attr('someAttr'))
{
    // it definitely has the attribute
}
else
{
    // it definitely does not have the attribute
}

Answer 2

Try changing:

if(undefined == el.attr('id'))

to:

if("" == el.attr('id'))

Answer 3

To find any element/attribute exists in DOM you need to use length property : Proper condition is :

if (el.attr('id').length > 0 )

Full function:

getElementId: function (el) {
    return el.attr('id').length > 0 ? el.attr('id') : el.attr('id', "anim-" + Math.random().toString().substr(2));
}

Answer 4

Adding a simple debugging statement in your code would show you why no id is being set.

getElementId: function(el) 
{
   alert(el.attr('id'));
   if(console)console.log(el.attr('id'));
   if(undefined == el.attr('id'))
   {
      el.attr('id',"anim-"+Math.random().toString().substr(2));
   }
   // alert(el.attr('id'));
   return el.attr('id');
},

You will see the alert does not return undefined. It returns an empty string

getElementId: function(el) 
{
   var id = el.attr('id');
   if(id.length===0)
   {
      id="anim-"+Math.random().toString().substr(2);               
      el.attr('id',id);
   }
   return id;
},

I also hope you know that math.random is really not random. You should have some sort of counter.

Answer 5

也许您的情况应该是这样的：

if (typeof el.attr('id') === 'undefined')