javascript - 用 jQuery 创建新的 div？

Question

我的页面中有这六个静态 div，我想创建一个更新变量并向页面添加新 div 的按钮。这是我到目前为止所拥有的：

function addSlot(){
   maxChecks = maxChecks+1;
   $("#list").append("<div id ='member7' class='member'></div>");
}

所以这增加了一个 div，但问题是新的 div 总是会有一个 'member7' 的 id。如何使下次单击按钮时，下一个新 div 是 member8，然后是 member9，等等？

Answer 1

用这个 ：

function addSlot(){
   maxChecks = maxChecks+1;
   var count = jQuery('.member').length;
   var div_id = count + 1;
   $("#list").append("<div id ='member" + div_id + "' class='member'></div>");
}

获取具有类“成员”的 div 的总数，然后在 DIV id 中执行 +1。

Answer 2

这很简单：

function addSlot( i ){
  maxChecks = maxChecks+1;
  $("#list").append("<div id ='member" + i + "' class='member'></div>");
}

Answer 3

这不是一个真正的 jQuery 问题。你只需要一个addSlot方法之外的计数器：

var counter = 1;
function addSlot(){
   maxChecks = maxChecks+1;
   $("#list").append("<div id ='member" + (counter++) + "' class='member'></div>");
}

显然，这不是唯一的方法。例如，如果您希望 ID 始终与成员 div 的数量保持一致，请参见Nishu 的回答。

Answer 4

这将在函数本身中缓存计数，无论调用上下文如何，而不是将计数分配给全局变量。

function addSlot(){
   var count = (addSlot.count || 0) + 1;
   $("#list").append("<div id='member" + count + "' class='member'></div>");
   addSlot.count = count;
}

Answer 5

或者

function addSlot(){
   maxChecks = maxChecks+1;
   $("#list").append("<div id ='member" + ( $('.member').length + 1) + "' class='member'></div>");
}