2
<ul>
    <li>チョコレート</li>
    <li>バニラ</li>
    <li>ストロベリー</li>
    <li>バナナ</li>
</ul>

上記の<li>がクリックされたとき、liが何番目であるかJavascript(jQueryは使わない)で取得したいです。
方法ご存知のかたがおられましたらご教示お願いします。

1

2 件の回答 2

2

liの配列の何番目にevent.targetと一致する内容が存在するか検索することで取得できます。
チョコレートは0番目になるので、1番目としたい場合は、取得した値に+1してください。

function chooseItem(event) {
  var ul = event.target.parentNode;
  var li = ul.querySelectorAll("li");
  console.log(Array.prototype.indexOf.call(li, event.target));
}
<ul onclick="chooseItem(event)">
  <li>チョコレート</li>
  <li>バニラ</li>
  <li>ストロベリー</li>
  <li>バナナ</li>
</ul>

2
  • ulは複数存在し得るので、event.target.parentNodeを使うべきかと思います。
    – sayuri
    Commented 2018年12月12日 22:57
  • その方がより親切ですね。ありがとうございます。
    – otak-lab
    Commented 2018年12月13日 8:51
0

かなりシンプルなバージョンになりますが、こちらのコードでクリックされたリストアイテムのidが取得できます。

function myFunction(event) { 
    alert(event.target.id); //チョコレートをクリックした場合item1が表示されます
}
<ul onclick="myFunction(event)">
    <li id="item1">チョコレート</li>
    <li id="item2">バニラ</li>
    <li id="item3">ストロベリー</li>
    <li id="item4">バナナ</li>
</ul>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。