Question

如果我的页面中有现有的HTML：

<p id="ui-id-1">foo</p>

然后我运行JS代码：

 $('<p>bar</p>').appendTo('body').uniqueId();

然后，新的p元素获得了ID ui-id-1。我希望JQuery UI足够聪明，可以分配一个未使用的ID？我做错了什么还是这个设计的JQuery UI行为？

Answer 1

您可以随时解决以满足您的需求。

var uniqueId = $.fn.extend({
  uniqueId: (function() {
    var uuid = 0;
    return function() {
      return this.each(function() {
        this.id = (function r() {
          return !$("#ui-id-" + (++uuid)).length ? "ui-id-" + uuid : r();
        })();
      });
    };
  })()
});
$('<p>bar</p>').appendTo('body').uniqueId();
$('<p>bar</p>').appendTo('body').uniqueId();
$('<p>bar</p>').appendTo('body').uniqueId();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ui-id-1">foo</p>
<p id="ui-id-3">foo</p>

注意：我尚未添加removeUniqueId的来源，如果您使用removeUniqueId中的功能，则可以从源添加。

Answer 2

问题是jQuery-UI使用uniqueId()跟踪它生成的每个id。生成新ID时，它可以避免使用已跟踪的现有ID。但是在某种情况下，如果您以jQuery-UI使用的格式手动为某些元素提供了id，则new uniqueId生成可能会复制相同的ID

＆＃13;

var div1 = $("#div-1");
var div2 = $("#div-2");

$("<p>bar</p>").appendTo(div1);
div1.find("p").uniqueId();

$("<p>bar</p>").appendTo(div2);
div2.find("p").uniqueId();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="div-1">
    <p id="ui-id-1">foo</p>    
</div>

<div id="div-2">
    <p>foo</p>    
</div>

＆＃13;

输出html将是：

<div id="div-1">
    <p id="ui-id-1">foo</p>
    <p id="ui-id-1">bar</p>  
</div>

<div id="div-2">
    <p id="ui-id-2">foo</p> 
    <p id="ui-id-3">bar</p>  
</div>

Jquery .uniqueId（）为一个小部件分配一个已经使用过的

2 个答案: