jquery保持动态添加/删除元素的数量

我有点jQuery，当按下按钮时会生成一个“div”。每页有10个“div”的限制。计数器工作正常，但是当我删除它时，它并不像我想要的那样工作。当一个被删除，并且我继续添加时，它会复制最后一个数字。jquery保持动态添加/删除元素的数量

例如，如果我创建6“DIV” S和删除＃4离开5个的div，然后我添加另一个div我将再次有6个div但我将具有标记6.

2“DIV” S

有更好的方法来管理计数器吗？

$(document).on('ready', function() { 
$("#objectivesGroup").sortable(); 
var counter = 1; 

$("#btnAddObjective").on("click" ,function() { 
    if(counter>10){ 
     alert("Only 10 learning objectives allowed per page."); 
     return false; 
    } 

    var newTextBoxDiv = $(document.createElement('tr')).attr("id", 'objective' + counter); 
    newTextBoxDiv.after().html(
     "<div>test</div><input type='button' value='delete'>"); 
    counter++; 
}); 

$('body').on('click', '.removeObjective', function() { 
    $(this).parent().remove(); 
    counter--; 
}); 
});

来源

2013-05-01 SkyeBoniwell

你使用的是ID吗？如果不是，只需在添加新对象之前计算您拥有的对象数量 – yoavmatchulsky 2013-05-01 16:56:09

创建一个未使用数字的队列。
从[1,2,3,4,5,6,7,8,9,10]开始
创建新项目时，请检查队列中是否存在值，以及是否存在，弹出并使用它。如果您删除某个项目，请将其重新添加到队列中。

这应该解决您的问题。

来源

2013-05-01 16:55:44

您可以使用jQuery来“计数”与您的类匹配的当前元素数量，而不是维护计数器变量。

var currentNumberOfDiv = $('.removeObjective').length;

注：这只会为你工作，如果你不真正需要的添加元素的唯一ID值。

来源

2013-05-01 17:01:49

这个你想要的是通过剩余的学习目标循环，（删除一个/一些后） - 重新编号他们 - 重新分配的ID - 在正确的数量

拿起计数接下来代码做以上

$(document).on('ready', function() { 
var counter = 1; 

$("#btnAddObjective").on("click" ,function() { 
    if(counter>10){ 
     alert("Only 10 learning objectives allowed per page."); 
     return false; 
    } 
    $(this).parent().append("<div id='objective'"+counter+"'>"+counter+"<input type='button' value='delete' class='removeObjective'></div>"); 
    counter++; 
}); 

$('body').on('click', '.removeObjective', function() { 
    $(this).parent().remove(); 
    counter--; 
    resetStuff(); 
}) 

function resetStuff() { 
    counter = 1; 
    $(".removeObjective").each(function() { 
     $(this).parent().attr('id','objective'+counter); 
     $(this).parent().text(counter).append('<input type="button" value="delete" class="removeObjective">'); 
     counter++; 
    }) 
} 
});

来源

2013-05-01 17:14:14 Dawson

jquery保持动态添加/删除元素的数量

回答

相关问题