LoginSignup
KLB686
@KLB686

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

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

解決したいこと

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

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

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

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

image.png

該当するソースコード


-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で指定する

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

1Answer

Comments

  1. @KLB686

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

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

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

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

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

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


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

    Questioner
    補足まで、、ありがとうございます!

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

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

Your answer might help someone💌