10

リンクのリストがあり、そのうちの 1 つはクラスがアクティブです。

次のボタンをクリックすると、現在の要素からクラスを削除して次の要素に追加したいのですが、追加できないようです。

私はうまくいけば私の問題を説明するためにフィドルを作りました。

http://jsfiddle.net/h6D4k/

$('.next').click(function(){
    $('ul.pagination').find('a.active').removeClass('active');
    $('ul.pagination').find('a.active').next('a').addClass('active');
    return false;
});
4

5 に答える 5

10

jQuery の最も便利な点の 1 つは、そのメソッドが (通常は) 連鎖可能であることです。つまり、呼び出し元のオブジェクトそのものを返します。したがって、次のように簡単に書くことができます。

$('ul.pagination').find('a.active').removeClass('active').closest('li')
                  .next('li').find('a').addClass('active');

...<li>要素ではなく、「次」にする必要がある要素であるため<a>。しかし実際には、それが問題の最後の要素である場合、おそらく 'active' を完全に破棄すべきではありません:

var $a      = $('ul.pagination').find('a.active'),
    $li     = $a.closest('li'),
    $nextLi = $li.next('li');

if ($nextLi.length) {
   $a.removeClass('active');
   $nextLi.find('a').addClass('active');
}
于 2012-12-19T16:25:14.810 に答える
3

なぜなら、これをやったら...

$('ul.pagination').find('a.active').removeClass('active');

もうありませんa.active-activeクラス名はその要素から削除されました。したがって、同じセレクターを繰り返します...

$('ul.pagination').find('a.active')//...

... 何も選択しません。

代わりにすべてを連鎖させてください。

$('ul.pagination').find('a.active').removeClass('active').next('a').addClass('active');

2 つ目の問題があります。jQuery API for によると、次のnext()ようになります。

一致した要素のセット内の各要素の直後の兄弟を取得します。セレクターが指定されている場合、そのセレクターに一致する場合にのみ、次の兄弟を取得します。

次の兄弟を取得しようとしていません:

<ul class="pagination">
    <li><a class="one active" href="#">X</a></li>
    <li><a class="two" href="#">X</a></li>
    <li><a class="three" href="#">X</a></li>
</ul>

<a href="" class="next">Next</a>
<a href="" class="prev">Prev</a>

<a>ドキュメント全体で次のものを取得しようとしています。それはもっと難しいです - そして私はそれを行う方法がわかりません.

于 2012-12-19T16:26:09.417 に答える
3

これは、フィドルの html 構造に基づいて実際に必要なものです。http://jsfiddle.net/h6D4k/1/

$('ul.pagination').find('a.active').removeClass('active').parent()
                  .next().find('a').addClass('active');
于 2012-12-19T16:29:21.933 に答える
2

このように書くと、アクションが最後の li でも何もしないようになります。

http://jsfiddle.net/h6D4k/6/

$('.next').click(function(e){
    e.preventDefault();
    if ($("ul.pagination a.active").parent().is(":last-child")) return;
    $('ul.pagination a.active').removeClass('active').parent().next().find("a").addClass('active');
});
于 2012-12-19T16:35:10.270 に答える
1

コードに 2 つのエラーがあります。

  1. 削除すると、アクティブなクラスはもう見つかりません
  2. あなたの a タグは li タグにネストされているため、 next() は期待どおりに機能しません

物事を単純化するために、アクティブなクラスを li タグにアタッチできます。

ライブデモ: http://jsfiddle.net/h6D4k/7/

コード：

$('.next').click(function(){
  $('ul.pagination').find('li.active').removeClass('active')
                    .next().addClass('active');
  return false;
});
于 2012-12-19T16:38:54.047 に答える