1

私は誰かがここで助けてくれることを望んでいました. クラス「.my-div-1」、「.my-div-2」、「.my-div-3」などのdivのスタックがあります。各div内にボタンがあり、クリックするとこのdivが削除されます. そこからやりたいことは、進行中のすべての div クラスを更新することです。したがって、クラス '.my-div-2' の div を削除すると、行の次の div '.my-div-3' は '.my-div-2' になり、その次は '.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();
4

2 に答える 2

3

すべての div のクラス値を再計算しないのはなぜですか?

例

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>​
于 2012-11-09T00:45:18.190 に答える
1

これが私の解決策です：

​$('.myDiv').click(function()
{
  var index = $(this).index() + 1;
  $(this).nextAll().each(function(innerIndex)
  {                                               
    $(this).removeClass('my-div-' + (index + innerIndex + 1)).addClass('my-div-' + (index + innerIndex )); 
  });
  $(this).remove();
});​​​​​​​​​​​
于 2012-11-09T00:54:46.737 に答える