jQueryのaddClass()とremoveClass()の使い方について

Question

また独学でjQueryを学習していて、疑問に思った点がありましたので質問させていただきます。

まずは現在のコードです。

<ul>
   <li><a href="#" class="dispMaxCount <?= $displayCount == 20 ? 'active' : '' ?>">20</a></li>
   <li><a href="#" class="dispMaxCount <?= $displayCount == 100 ? 'active' : '' ?>">100</a></li>
   <li><a href="#" class="dispMaxCount <?= $displayCount == 200 ? 'active' : '' ?>">200</a></li>
   <li><button class="btn_secondary changeCount">表示件数変更</button></li>
</ul>

<script>
 $(function(){
    //最大表示件数の変更
    $('.dispMaxCount').on('click', function(){
        $(this).parent().parent().find('.active').removeClass('active');
        $(this).addClass('active');
    });
 });
</script>

UI

---

表示件数が変えられるようなボタンを作っていたのですが、
なかなかうまくいかず、現在は強制的に親要素のさらに親要素までさかのぼり、
一度activeクラスを全消しし、
最後にクリックした要素にactiveクラスを付与しています。

・・・一応上記のコードでも問題なく動くのですが、
クラスを全消ししたあとで、再度現在のクラスにactiveクラスをつけるというこのコードはいかがなものなのかと思いました。
（また固定概念が邪魔をしていて、もしかしたらこれが一番効率がよいのかもしれませんが・・・）

もう一点、　「.parent().parent()」と記述しているのがかっこ悪く見えたのですが、このように書かずとも済むものなのか、この記述方法は至って一般的なのかをお聞きしたいです。

お手隙の方がいらっしゃいましたらご教示いただけますと幸いです。

Answer 1

.activeを追加したり削除したりするのは親要素ではなく<a>タグですよね。

 $(function(){
    //最大表示件数の変更
    $('.dispMaxCount').on('click', function(){
        $(this).addClass('active')
        .parent().siblings().find('.active').removeClass('active');
    });
 });

HTMLの構造にもよりますが、クリックされた要素（またはその親要素）に.activeを付与してそれ以外は消すというやり方は一般的だと思います。
.siblings()は自身以外の兄弟要素を取得できるので便利です。
また、場合によってはclassToggle()を使って差し替えることもありますが、提示されたようなHTML構造でしたらやはり上記のようなやり方がいいのではと思います。
あと補足ですが、もし$(this)を繰り返し使う場合は、一旦

var $this = $(this);

のように変数にし、それを使う方が処理が速くなります。

Comments

[azuapricot]

すごい！ありがとうございます～！
やりたかったことが全部叶えられて感謝感激です・・・！
.siblings()も知らなかったので勉強させていただきました！
$(this)も次回からは変数に格納しようと思います！ありがとうございました！

Answer 2

疑似クラスの付け外しについては知識不足故明確な回答ができないのですが、
parentについてはこんな感じでいかがでしょうか。

$(this).closest('ul').find('.active').removeClass('active');

Qiita - parent連打やめろ

Answer 3

下記でどうでしょうか。

$('.dispMaxCount').filter('.active').removeClass('active');