jQueryで同じ名前のclassが複数ある場合、3番目などのclassを指定したい場合どうしたらいいですか？

Question

いつもお世話になっております！

jQueryで同じ名前のclassが4個あり、その、3番目と4番目のclassをhideで消したいと思っています。
例：$('.buttonlg').hide();

3番目と4番目のclassを指定するにはどのようにコードを書けば良いのでしょうか？

初心者なので分からないため、教えていただけますと幸いです＞＜；

宜しくお願い致します！

Answer 1

jquery 番目 指定などでgoogleで検索をかければ色々手法が見つかります。
下記、ご参考までに。

<p class="hoge">hoge1</p>
<p class="hoge">hoge2</p>
<p class="hoge">hoge3</p>
<p class="hoge">hoge4</p>

$(function() {
  
  // eq()を使う場合
  $('.hoge').eq(2).hide();
  $('.hoge').eq(3).hide();
  
  // nth-childを使う場合
  /*  
  $('.hoge:nth-child(3)').hide();
  $('.hoge:nth-child(4)').hide();
  */
  
  // gt(), lt()を使う場合
  /**
  $('.hoge:gt(1):lt(3)').hide();
  */
});

Comments

[micco]

詳しいご回答ありがとうございます＾＾＊
大変助かりました！hideだとエラーになってしまったので、removeで動かすことができました！

Answer 2

いちおう、.eq()などで「何番目」という指定はできます。

ただ、恒常的に「あるクラスを持った要素の中で、特定のいくつかを選ぶ」というような状況が発生するのであれば、jQuery用に別途でクラスを振ってしまったほうがいいような気もします。<span class="class-1 class-2">のように、複数振っても大丈夫です。

Comments

[micco]

解決方法ありがとうございます！eqで指定ができました(*^^*)

classを変更できたらいいのですが、私個人では変更する権限がないので、jQueryのみ操作できる状態です＞＜

教えていただいて大変助かりました！ありがとうございました＊

Answer 3

要素の指定にはCSSセレクタを使用すれば簡単です。

今回の例ですと、○○番目の要素を指定するnth-childが使えるかと思います。例えば

・3番目、4番目のみを指定

$('.buttonlg:nth-child(n+3):nth-child(-n+4)').hide();

・3番目以降のみを指定

$('.buttonlg:nth-child(n+3)').hide();

のような感じでどうでしょうか？

Comments

[micco]

ご回答ありがとうございます＾＾
「nth-child」…新しいコードを教えていただきありがとうございます！
試してみましたが、残念ながら私が使用しているツール（？）では動かなかったようです。。。
※バージョンが少し古いみたいです。

新しいコードが知れたので、使用できるときに活用したいと思います！
ご丁寧にありがとうございましたm(＿)m