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 是这样的，我遇到了一个错误：

<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”。知道为什么会这样吗？

伊夫

score 3 · Accepted Answer

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

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

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

$( '.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') 99% 的时间比 $('.class')

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

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