jquery - 唯一元素 ID

Question

我对唯一元素 ID 有疑问？

我在这里做错了什么？

http://jsfiddle.net/KRRES/

HTML：

<div id='gmapItemHolder'></div>

<button id='btnCreateMarker'>Add</button>

查询：

$("#btnCreateMarker").click(function () {
    i = 1;
    var gmapItemsHolder = "gmapItems" + i++;

    $('<ul>' + '</ul>')
        .attr({id: gmapItemsHolder, class: 'gmapUlHolder row-fluid'}).prependTo('#gmapItemHolder')
}); 

更新：

发生的事情是所有新创建的 ul 都获得了 ID 1

Answer 1

的范围i是本地的，因此它不会在点击之间保留状态。增加范围i，使其在事件之间保留。

  var i = 1;
  $("#btnCreateMarker").click(function () {

      var gmapItemsHolder = "gmapItems" + i++;

      $('<ul>'
         + '</ul>'
         ).attr({id: gmapItemsHolder, class: 'gmapUlHolder row-fluid'}).prependTo('#gmapItemHolder')
  }); 

Answer 2

正如凯文所说，问题在于i每次都被使用和丢弃。

但不要像他建议的那样创建全局变量。相反，将代码包装在一个作用域函数中并在那里定义它：

(function() {
  var i = 1;
  $("#btnCreateMarker").click(function () {

      var gmapItemsHolder = "gmapItems" + i++;

      $('<ul>'
         + '</ul>'
         ).attr({id: gmapItemsHolder, class: 'gmapUlHolder row-fluid'}).prependTo('#gmapItemHolder')
  }); 
})();

这样，i对事件处理程序的所有调用共享click，但它不是全局变量。

Answer 3

尝试这个：

var i =jQuery("#gmapItemHolder").children().length + 1;
var gmapItemsHolder = "gmapItems" + i;

代替：

i = 1;
var gmapItemsHolder = "gmapItems" + i++;