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中删除“selected”类并将其应用于具有“sameClass”类的下一个div，因此结果如下：< / 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>

我希望你明白我的意思:)。

更新：

我发现这个效果最好。

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

我遇到过一个错误，如果HTML是这样的话：

<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>

它不会选择第二个P块中的“sameClass”。知道为什么会这样吗？

EEF

Answer 1

这是一个优雅的解决方案：

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

Answer 2

您可以使用：

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

或者其他东西（主要是伪编码的）。

Answer 3

试试这个

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

Answer 4

$( '.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;
  }
} );

Answer 5

你不清楚你是否总能找到'下一个'div。所以使用.nextAll或.siblings.eq（0）取决于你是左右两个。

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

另外不要忘记在选择器中使用tagname前缀而不是基于纯类的选择器$（'div.class'）99％的时间比$（'。class'）更好

P.S而不是nextAll你可以使用ben almans nextUntil插件@ http://github.com/cowboy/jquery-misc

Answer 6

修改Jimmeh的回复

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

Answer 7

我尝试了这个，我认为它能做到你想要的：

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元素，它就不起作用，但到目前为止，其他答案都没有。

Answer 8

试试这个：

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

JQuery选择下一个元素

8 个答案: