jQuery选择下一个元素答案

【问题标题】：JQuery select the next elementjQuery选择下一个元素
【发布时间】：2010-12-16 06:06:24
【问题描述】：

我正在尝试使用 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”。知道为什么会这样吗？

伊夫

【问题讨论】：

您选择的解决方案（我的代码）不起作用，因为在您的原始示例中，您没有提到 div 将跨越多个
标签，它们必须位于相同的水平才能工作。并且请将您的 cmets 放在您选择的特定解决方案的帖子下。
啊，好吧 - 如果 div 跨越多个元素，您是否有任何关于如何使其工作的指示？

标签： jquery select find next

【解决方案1】：

试试这个：

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

【讨论】：

.prev 只返回前一个兄弟，你需要 prevAll()
你是对的，我没有测试过这个。我在早上喝咖啡的时候发布了它，可能是它还没有唤醒我:) 无论如何，我已经用有效的代码编辑了我的答案（并使用 nextAll）
但现在它将选择添加到具有相同类的所有下一个兄弟姐妹，而不仅仅是下一个（ .eq(0) ）
再一次，你是对的 :) 所以在 nextAll 选择器中应该是 '.sameClass:eq(0)'

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我试过了，我认为它可以满足您的需求：

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

【讨论】：

【解决方案4】：

如果你总是继续寻找'下一个'div，你没有说清楚。因此，使用 .nextAll 或 .siblings.eq(0) 取决于您是否同时向左和向右。

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

另外不要忘记在选择器中使用标记名前缀而不是基于纯类的选择器 $('div.class') 99% 的时间比 $('.class') 好

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

【讨论】：

【解决方案5】：

Jimmeh 回复的修改

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

【讨论】：

正如我的 cmets 中所建议的那样，if 语句是错误的，但其他方面似乎很好。
你需要在当前项目已经被选中时设置标志，然后再删除。对于下一个 .sameClass 项 flag==true 表示将 .selected 添加到当前。
是的，但这基本上会找到选中的项目，然后删除选中的项目，然后将其重新添加到同一个项目中。您可以使用 and else if，但目前这不起作用。

【解决方案6】：

你可以使用：

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

或其他东西（大部分是伪代码）。

【讨论】：

$('.sameClass').each(function() { if (this.attr('class').contains('selected')) { setNextAsSelected = true this.removeClass('selected '); } if(setNextAsSelected) { this.addClass('selected'); setNextAsSelected =false; } });
谢谢，我写的有点匆忙，一直在慢慢编辑；p

【解决方案7】：

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

【讨论】：

这会将 .selected 添加到下一个所有 .sameClass div；这不是他的意思
不会。注意第一个“return false;” :)

【解决方案8】：

试试这个

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

【讨论】：