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

javascript
この記事は約3分で読めます。
スポンサーリンク

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

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);
});
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました