問題 × 解決策

現在の要素が何番目の要素かを取得する方法

問題

現在の要素が何番目の要素かを取得するには?

解決策

「$("要素のセレクタ").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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

18 + eighteen =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧