<ul>
<li>チョコレート</li>
<li>バニラ</li>
<li>ストロベリー</li>
<li>バナナ</li>
</ul>
上記の<li>
がクリックされたとき、liが何番目であるかJavascript(jQueryは使わない)で取得したいです。
方法ご存知のかたがおられましたらご教示お願いします。
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>
かなりシンプルなバージョンになりますが、こちらのコードでクリックされたリストアイテムの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>