@KLB686posted at 2022-02-24

【jquery】index,notの使用方法について【初学者】

Q&A

Closed

JavaScript jQuery 初心者 index not

解決したいこと

以下⓵⓶を実現したい
⓵Q10の子要素をクリックした時に、
その要素のインデックスと等しいid="q11"の子要素にis-bigというクラスを追加したい。

⓶⓵の処理と同時にそれ以外のクラスからis-bigを削除したい。
※インデックスの一致する要素だけにis-bigがついている状態にしたい

発生している問題・エラー

⓵は実現できるが、⓶を同時に処理することができない。

該当するソースコード


-html-
      <ul class="u-mbm lists" id="jsi-q10">
        <li>Q10_1</li>
        <li>Q10_2</li>
        <li>Q10_3</li>
      </ul>
      <ul class="u-mbm lists" id="jsi-q11">
        <li>Q11_1</li>
        <li>Q11_2</li>
        <li>Q11_3</li>
      </ul>

--javascript--

          $("#jsi-q10")
            .find("li")
            .on("click", function () {
              let orderNumber = $(this).index();

              $("#jsi-q11").find("li")
                .eq(orderNumber).addClass("is-big");
              $("#jsi-q11").find("li")
                .not(eq(orderNumber).removeClass("is-big"));
            });

--css--
.is-big {
  font-size: 25px;
}

### 自分で試したこと
「eq()」「not:」の使用方法について調べました。

not:を使って『変数:orderNumber以外のものを指定する』ことができれば
解決できる問題ではないかというところまで整理できましたが、具体的な方針が分からず質問に至りました。調べる力不足で申し訳ございません。

### 整理できたこと

1.removeClassを使用して、適切なセレクタを指定する
2.jsi-q11.find("li")　かつ　orderNumber以外のindexを1で指定する

今回初めて質問させていただく初学者です。
分かりずらい点等あれば厳しくご指摘いただければと存じます。

1Answer

@YottyPG posted at 2022-02-24

これでいけました。

$("#jsi-q11 li").not(`:eq(${orderNumber})`).removeClass("is-big");

See the Pen Untitled by yotty (@yotty) on CodePen.

0Like

Comments

@KLB686
Questioner
回答ありがとうございます！
無事解決しました！

記載いただきましたコードを参考に
notの使用方法について、下記URLもあわせて確認いたしました。
https://www.sejuku.net/blog/37111

⓵notの文法のが分かっていなかった
⓶eq()に変数を引数として渡す?方法
※${　}を使う

しっかり調べて解釈できれば答えにたどり着けたかもしれないなと
自分の調べる力不足を実感しました。

ご回答者様、お力添えありがとうございました！
@YottyPG
解決したようでよかったです。

一応補足しておくと、${　}はテンプレートリテラルです。
単純に文字列連結した以下のような形でも行けます。
$("#jsi-q11 li").not(':eq(' + orderNumber + ')').removeClass("is-big");

またnotもセレクタとして記述した以下のような形でもいけますね。
$(`#jsi-q11 li:not(:eq(${orderNumber}))`).removeClass("is-big");
@KLB686
Questioner
補足まで、、ありがとうございます！

記載いただいた方法をタイピングしてみましたが、主観ですが、テンプレートリテラルでの表記方法がシンプルに感じました。

ただ、色んな表記方法を知れて大変勉強になりました。
丁寧なご回答、誠にありがとうございました！

Are you sure you want to delete the question?