Question

我希望有一个函数可以为给定的jquery对象动态生成ID，如果它还没有。然后应该在将来的请求中使用这些ID。

我想出了下面的代码，但它不起作用。 ID从未设置过。下面注释掉的警告声明总是返回undefined。

我总是传递代码如$（this）或$（options.el）作为替换'el'的参数。最初，元素没有在HTML中设置显式ID。

任何帮助将不胜感激，这是代码：

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

测试.attr()返回的值的真实性，并确保el实际上是一个jQuery对象。

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');
},

根据您尝试检索的属性， .attr()可能会返回undefined或""。

其他推荐的清理：

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;
},

您确实需要确保您没有为之前已使用过的元素分配ID。上述功能就是这样做的。完成同样事情的一种更简单的方法是使用存储在函数范围之外某处的递增计数器：

__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;
},

上次编辑（我保证）

当元素没有请求的属性时，似乎有.attr()返回的混淆。运行some tests后，看起来.attr()会返回：

的空字符串至少 id和class（也许还有其他HTML4规范属性;未测试）
undefined用于未由规范

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;博士

只是测试.attr()返回的值的真实性，因为它对undefined和""（空字符串）的处理方式相同：

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

Answer 2

尝试更改：

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

为：

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

Answer 3

要查找DOM中存在的任何元素/属性，您需要使用length属性：适当的条件是：

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

全功能：

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

Answer 4

在代码中添加一个简单的调试语句将显示为什么没有设置id。

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');
},

您将看到警报未返回undefined。它返回一个空字符串

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;
},

我也希望你知道math.random真的不是随机的。你应该有某种反击。

Answer 5

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

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

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

5 个答案:

上次编辑（我保证）

TL;博士