1

私はこのような要素のリストを持っています：

<div class="odd">1</div>
<div class="even">2</div>
<div class="odd">3</div>
<div class="even">4</div>

ここで、ユーザーが要素3を消去すると、結果は次のようになります。

<div class="odd">1</div>
<div class="even">2</div>
<div class="even">4</div>

ここで、jQueryを最初の要素から最後の要素に移動して、クラスを再定義する必要があります。

<div class="odd">1</div>
<div class="even">2</div>
<div class="odd">4</div>

これにどうアプローチするかわかりません。

4

4 に答える 4

3

セレクター:oddを使用できます。:even

var $divs = $('div');

$divs.filter(':odd').attr('class', 'odd');
$divs.filter(':even').attr('class', 'even');
于 2012-09-21T22:11:19.337 に答える
3

これはそれを行う必要があります

$("div").removeClass('odd even');
$("div:odd").addClass('odd');
$("div:even").addClass('even');

.oddまたは.evenクラスを削除するだけで、追加した追加のクラス（.oddおよび.even以外）は「存続」します。

于 2012-09-21T22:11:49.990 に答える
1

またはこれ：

$('div:odd').attr('class', 'odd');
$('div:even').attr('class', 'even');

JsFiddleの例：

http://jsfiddle.net/2VpgV/

于 2012-09-21T22:13:09.507 に答える
0

イベント委任を使用する必要があります|：

イベント委任を使用すると、単一のイベントリスナーを親要素にアタッチできます。このリスナーは、子孫が現在存在するか将来追加されるかに関係なく、セレクターに一致するすべての子孫に対して起動します。

以下は、イベント委任メカニズムの例です。

$(function(){
    $('#container').on('click', '.btn', function(e){
           $(this).parent().nextAll().each(function(i,el){
             var $t = $(this);
               $t.attr('class', $t.is('.odd') ? 'even':'odd');
           }).end().remove();
    });
});
.odd{background-color:red}
.even{background-color:green}
.btn{text-decoration:underline;font-style:italic;padding:2px;display:inline-block;cursor:pointer;margin:2px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="odd">
    1<span class="btn" title="remove the line and fix siblings class">remove line</span>
  </div>
  <div class="even">
    2<span class="btn" title="remove the line and fix siblings class">remove line</span>
  </div>
  <div class="odd">
    3<span class="btn" title="remove the line and fix siblings class">remove line</span>
  </div>
  <div class="even">
    4<span class="btn" title="remove the line and fix siblings class">remove line</span>
  </div>
  <div class="odd">
    5<span class="btn" title="remove the line and fix siblings class">remove line</span>
  </div>
  <div class="even">
    6<span class="btn" title="remove the line and fix siblings class">remove line</span>
  </div>
  <div class="odd">
    7<span class="btn" title="remove the line and fix siblings class">remove line</span>
  </div>
  <div class="even">
    8<span class="btn" title="remove the line and fix siblings class">remove line</span>
  </div>
</div>

于 2012-09-21T23:06:29.980 に答える