带有类值增量的 jQuery nextAll

Question

我希望有人能帮忙。我有一堆带有类“.my-div-1”、“.my-div-2”、“.my-div-3”等的 div。每个 div 内都有一个按钮，单击该按钮时会删除该 div 。我想要做的是更新所有正在进行的 div 类。因此，如果我删除了类为“.my-div-2”的 div，则行中的下一个 div“.my-div-3”将变为“.my-div-2”，之后的下一个 div 将变为“.my-” div-4'，将变成'.my-div-3'等等。

我现在设置的方式是使用 .nextAll() 删除旧类并添加新类，并使用动态更新编号。然而，这仅适用于下一个 div，并且动态数字不会为后面的 div 增加。我不确定 nextAll 是否是执行此操作的方法，可能有更好的方法。关于如何实现这一目标有什么想法吗？任何帮助将不胜感激。

编辑 - 我还应该提到，每个 div 还混合了我需要保留的其他类。

HTML 是:

<div class="my-div-container">
   <div class="myDiv my-div-1"></div>
   <div class="myDiv my-div-2"></div>
   <div class="myDiv my-div-3"></div>
   <div class="myDiv my-div-4"></div>
</div>

以及点击事件中的 jQuery:

var divIndex = $(this).parents('.myDiv').prevAll().length;      

$(this).parents('.myDiv').nextAll().removeClass('my-div-'+(divIndex+1)).addClass('my-div-'+(divIndex));
$(this).parents('.myDiv').remove();

Answer 1

为什么不重新计算所有 div 的类值？

Example

JS

$('span').click(function(){

    $(this).closest('.myDiv').remove(); 

    $('.myDiv').each(function(i){
        var div = $(this); 
        var cls = div.attr('class'); 
        div.attr('class', cls.replace(/my\-div\-[0-9]/, 'my-div-' + (i+1)));
    }); 
}); ​

HTML

<div class="my-div-container">
    <div class="myDiv my-div-1"><span>Test</span></div>
   <div class="myDiv my-div-2 someotherclass"><span>Test</span></div>
   <div class="myDiv my-div-3 test"><span>Test</span></div>
   <div class="myDiv my-div-4"><span>Test</span></div>
</div>​