jquery - JQueryは次の要素を選択します

Question

JQuery を使用して、同じクラスの一連の要素から次の要素を選択しようとしています。

HTMLの設定は次のとおりです。

<div class="sameClass selected">
  <p>Text in here</p>
</div>
<div class="differentClass">
  <p>Text in here
</div>
<div class="sameClass">
  <p>Text in here</p>
</div>

クラス「sameClass」を持つ最初の div がある場合、「選択された」クラスを一番上の div から削除し、クラス「sameClass」を持つ次の div に適用したいので、結果は次のようになります。

<div class="sameClass">
  <p>Text in here</p>
</div>
<div class="differentClass">
  <p>Text in here
</div>
<div class="sameClass selected">
  <p>Text in here</p>
</div>

私が言いたいことを理解していただければ幸いです:)

アップデート：

これが最も効果的であることがわかりました。

$(".sameClass.selected").nextAll(".sameClass:first").andSelf().toggleClass("selected")

HTMLがそのようなものである場合、私はそれで1つのバグに遭遇しました:

<p>
  <div class="sameClass">
    <p>Text in here</p>
  </div>
  <div class="differentClass">
    <p>Text in here
  </div>
  <div class="sameClass  selected">
    <p>Text in here</p>
  </div>
</p>
<p>
  <div class="sameClass">
    <p>Text in here</p>
  </div>
</p>

2 番目の P ブロックにある「sameClass」は選択されません。なぜこれが起こっているのですか？

イーフ

score 3 · Accepted Answer

エレガントなソリューションは次のとおりです。

$(".sameClass.selected")
 .nextAll(".sameClass:first").andSelf()
 .toggleClass("selected")

score 0 · Accepted Answer

$( '.sameClass' ).each ( function () {
  var jThis = $( this );
  if ( jThis.hasClass ( 'selected' ) ) {
    jThis.removeClass ( 'selected' );
    jThis.nextAll ( '.sameClass' ).each ( function () {
      $( this ).addClass ( 'selected' );
      return false;
    } );

    return false;
  }
} );

score 0 · Accepted Answer

'次の'divを見つけるために常に前進しているかどうかを明確にしないでください。したがって、.nextAllを使用するか、.siblings.eq（0）を使用するかは、左と右の両方に移動するかどうかによって異なります。

var $el = $('div.selected');
$el.removeClass('selected');
   .nextAll('.' + $el.attr('class') ).eq(0)
   .addClass('selected');

また、純粋なクラスベースのセレクターではなく、セレクターでタグ名プレフィックスを使用することを忘れないでください$（'div.class'）$（'。class'）よりも99％優れています

nextAllの代わりにPSでbenalmansnextUntilプラグインを使用できます@http：//github.com/cowboy/jquery-misc

score 0 · Accepted Answer

あなたが使用することができます：

$('.sameClass').each(function() {
  if(setNextAsSelected) {
      this.addClass('selected');
      return;
  }
  if (this.attr('class').contains('selected')) { 
      setNextAsSelected = true;
      this.removeClass('selected'); 
  }
});

または何か（主に疑似コード）。

score 0 · Accepted Answer

これを試して

var sel = $('.selected');
sel.removeClass('selected');
var ofSameClass = sel.siblings('.'+sel.attr('class'));
ofSameClass.eq(0).addClass('selected');

score 0 · Accepted Answer

Jimmeh の返信の修正

var setNextAsSelected = false;
$('.sameClass').each(function() {
    if (this.hasClass('selected')) 
    { 
      setNextAsSelected = true 
      this.removeClass('selected');
    }
    if(setNextAsSelected)
    {
       this.addClass('selected');
       setNextAsSelected =false;
    }
});

score 0 · Accepted Answer

私はこれを試しましたが、あなたが望むことをすると思います：

var s='selected';
var c='.sameClass';
$($(c+'.'+s).removeClass(s).nextAll(c)[0]).addClass(s)
// s and c added for brevity, probably use this expanded in source code.

最後の.sameClass要素が選択された場合は機能しませんが、これまでの他の回答も機能しません。

score -1 · Accepted Answer

これを試してください：

$('.sameClass.selected')
    .removeClass('selected')
    .nextAll('.sameClass:eq(0)')
       .addClass('selected')'

jquery - JQueryは次の要素を選択します

8 に答える 8

Related

Reference