
[code]

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

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


CC BY-SA 4.0
2018-12-12T07:21:59.043
51144
2018-12-13T08:53:12.650
31413
question
javascript
JavaScriptでクリックされた要素のindexを取得したい


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

[code]

    function myFunction(event) { 
        alert(event.target.id); //チョコレートをクリックした場合item1が表示されます
    }
[/code]

[code]

    <ul onclick="myFunction(event)">
        <li id="item1">チョコレート</li>
        <li id="item2">バニラ</li>
        <li id="item3">ストロベリー</li>
        <li id="item4">バナナ</li>
    </ul>
[/code]


CC BY-SA 4.0
2018-12-12T08:32:21.450
51149
2018-12-13T08:53:12.650
2018-12-13T08:53:12.650
3068
31397
51144
answer


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

[code]

    function chooseItem(event) {
      var ul = event.target.parentNode;
      var li = ul.querySelectorAll("li");
      console.log(Array.prototype.indexOf.call(li, event.target));
    }
[/code]

[code]

    <ul onclick="chooseItem(event)">
      <li>チョコレート</li>
      <li>バニラ</li>
      <li>ストロベリー</li>
      <li>バナナ</li>
    </ul>
[/code]


CC BY-SA 4.0
2018-12-12T14:52:21.553
51154
2018-12-13T08:49:58.183
2018-12-13T08:49:58.183
9566
9566
51144
answer