JQuery выберите следующий элемент - PullRequest
Новая
       32

JQuery выберите следующий элемент

0 голосов
/ 13 ноября 2009

Я пытаюсь использовать 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>

Когда у меня есть первый div с классом sameClass, я хотел бы удалить «выбранный» класс из верхнего div и применить его к следующему div с классом sameClass, чтобы результаты были такими: 

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

Надеюсь, вы понимаете, о чем я:)

UPDATE:

Я обнаружил, что этот работает лучше всего. 

$(".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>

Он не выберет "sameClass", который находится во втором P-блоке. Есть идеи, почему это происходит?

Eef

Ответы [ 8 ]

3 голосов
/ 13 ноября 2009

Вот элегантное решение: 

$(".sameClass.selected")
 .nextAll(".sameClass:first").andSelf()
 .toggleClass("selected")
0 голосов
/ 13 ноября 2009

Изменение ответа Джимме 

var setNextAsSelected = false;
$('.sameClass').each(function() {
    if (this.hasClass('selected')) 
    { 
      setNextAsSelected = true 
      this.removeClass('selected');
    }
    if(setNextAsSelected)
    {
       this.addClass('selected');
       setNextAsSelected =false;
    }
});
0 голосов
/ 13 ноября 2009

Я попробовал это, и я думаю, что он делает то, что вы хотите: 

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, но другие ответы пока не действуют.

0 голосов
/ 13 ноября 2009

Вы не даете понять, всегда ли вы идете вперед, чтобы найти «следующий» 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 вместо nextВсе вы можете использовать ben almans nextUntil плагин доступен @ http://github.com/cowboy/jquery-misc

0 голосов
/ 13 ноября 2009 
$( '.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;
  }
} );
0 голосов
/ 13 ноября 2009

Попробуйте с этим: 

$('.sameClass.selected')
    .removeClass('selected')
    .nextAll('.sameClass:eq(0)')
       .addClass('selected')'
0 голосов
/ 13 ноября 2009

Попробуйте это 

var sel = $('.selected');
sel.removeClass('selected');
var ofSameClass = sel.siblings('.'+sel.attr('class'));
ofSameClass.eq(0).addClass('selected');
0 голосов
/ 13 ноября 2009

Вы можете использовать: 

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

или что-то (в основном псевдокодирование).

...