クリックしたらその要素が「何番目の子要素」かを表示したい
Q&A
Closed
解決したいこと
「JavaScript/JQuery」 クリックしたらその要素が「何番目の子要素」かを表示したい。さらに最初の要素を0ではなく1と表示させたい。
例）
ただいまJavaScriptの勉強をしているのですが、いくらネットで調べても分からなかったので質問させてください。
該当するソースコード
<body>
<div>...</div>
<div>...</div>
<div id="jsi-q7">
<dl class="u-mbm lists">
<dt>Q7_dt_1</dt>
<dd>Q7_dd_1</dd>
</dl>
<dl class="u-mbm lists">
<dt>Q7_dt_2</dt>
<dd>Q7_dd_2</dd>
</dl>
<dl class="u-mbm lists">
<dt>Q7_dt_3</dt>
<dd>Q7_dd_3</dd>
</dl>
<dl class="u-mbm lists">
<dt>Q7_dt_4</dt>
<dd>Q7_dd_</dd>
</dl>
<dl class="u-mbm lists">
<dt>Q7_dt_5</dt>
<dd>Q7_dd_5</dd>
</dl>
</div>
<script defer>
window.addEventListener( 'load', function(){
$("#jsi-q7").find("dl").on('click', function() {
let targetNum = $(this).closest("dl").index();
console.log(targetNum);
alert(targetNum);
});
}, false);
</script>
</body>
自分で試したこと
closestを使って最初の要素を0ではなく１と表示させるらしいのですが、
closestは直近の親要素を取得するらしいので、.closest("dl")この（）内を色々変えて試してみたのですが上手くいきません。
id="jsi-q7"の位置がおかしいかと思い、< dl>に移動させてみましたが上手くいきません。
ご回答の程宜しくお願い致します。
0
