【jQuery】特定クラスがリストの何番目にあるかを取得！

リストの特定クラスが何番目にあるのかの取得方法をご紹介。

var number = $('.sample').index('ul li');

「$(‘.sample’)」に番号を取得したい特定のクラスやIDを書いて、「.index(‘ul li’)」には、特定クラスが含まれるリストを書きます。
押されたリスト番号を取得する「.index(this)」と書き方が似ているので覚えやすかったり、こんがらがったするね。
実際に使ってみたデモを用意していますので、リストをポチポチしながら取得している様子を確認してください。

DEMO

HOME
利用方法
料金
お問い合わせ

0番目にsampleクラスが付いています。

デモのソースも貼っておきますので、理解の参考になれば嬉しいです。

HTML

<div class="demo">
  <ul>
    <li class="sample">HOME</li>
    <li>利用方法</li>
    <li>料金</li>
    <li>お問い合わせ</li>
  </ul>
  <p><span class="num">0</span>番目にsampleクラスが付いています。</p>
</div>

CSS

.demo ul {
  width: 100%;
  height: 72px;
  margin: 0;
  padding: 0;
  box-shadow: 0 16px 24px -22px rgba(0,0,0,.4);
  text-align: center;
}
.demo ul li {
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 20px 0;
  width: 115px;
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  transition: .3s;
}
.sample {
  color: #03c6b9;
  font-weight: bold;
  border-bottom: 2px solid #03c6b9;
  cursor: default !important;
}
.demo > p {
  margin: 40px auto;
  text-align: center;
  font-size: 20px;
}
.num {
  color: #03c6b9;
  font-weight: bold;
  margin-right: 4px;
}

jQuery

$('.demo li').on('click', function () {
  $(".demo li").removeClass("sample");
  $(".demo li").eq($(".demo li").index(this)).addClass("sample");
  var index = $('.sample').index('.demo ul li'); // sampleクラスが付いているindex番号を取得。
  $(".num").text(index);
});