問題
現在の要素が何番目の要素かを取得するには？
解決策
「$("要素のセレクタ").index()」でその要素が何番目かを取得することができます。
要素の順番を取得する
jQueryで現在の要素が何番目の要素かを取得する方法をご紹介します。
DEMOはこちら
- ※下のA～Eの要素を選択すると、その下に何番目が選択されているかが表示されます。
- A
- B
- C
- D
- E
現在選択されている要素の順番は1番目です。
HTML
<div class="switchtime-box">
<ul class="switchtime-list">
<li><span class="inner">A</span></li>
<li><span class="inner">B</span></li>
<li><span class="inner">C</span></li>
<li><span class="inner">D</span></li>
<li><span class="inner">E</span></li>
</ul>
<p class="text">現在選択されている要素の順番は<span class="numtext"></span>番目です。</p>
</div>CSS
.switchtime-list > li{
display: inline-block;
vertical-align: top;
margin: 0 10px 10px 0;
}
.switchtime-list > li .inner{
display: inline-block;
padding: 10px 15px;
color: #F15A24;
font-weight: bold;
background-color: #fef5f2;
cursor: pointer;
}
.switchtime-list > li.on .inner{
background-color: #ffe4db;
}
.numtext{
display: inline-block;
vertical-align: baseline;
margin: 0 5px;
padding: 5px 10px;
font-weight: bold;
background-color: #fef5f2;
}javascript
「$(“要素のセレクタ”).index()」でその要素が何番目かを取得することができます。
$(".switchtime-list li > .inner").each(function(){
$(this).click(function(event){
$(".switchtime-list li").removeClass('on');
$(this).closest('li').addClass('on');
var count = $(this).closest('li').index();
var order = count + 1;
$('.numtext').text( order );
});
});ここに注意！
index()で取得できる値は0から始まります。「0 = 1番目」として計算されますので、その点の注意が必要です。
参照
【jQueryのindex()で順番を取得する）】
https://www.flatflag.nir87.com/index-2026
コメント