jQueryで要素の数を取得｜divやliを数える

jQueryで要素の数を取得｜divやリストを数える

リストの数を取得して何かする時や、リストにしていなかった要素の数を調べる時に便利なjQueryの記述のご紹介です。

リストの数を取得

  <div class="list">
    <ul>
      <li>いち</li>
      <li>に</li>
      <li>さん</li>
      <li>よん</li>
      <li>ご</li>
    </ul>
  </div>

上記のHTMLのリストの数を取得する場合、下のようなjQueryの記述で取得可能です。

  var list = $(".list li").length;
  alert(list);

結果は、「５」がアラートします。
「.length」は、「index」とは違い1から数え始めるため、要素の数だけ数字を返してくれます。

divの数を取得

  <div class="contents">
    <div class="contents__top"></div>
    <div class="contents__center1"></div>
    <div class="contents__center2"></div>
    <div class="contents__bottom"></div>
  </div>

リスト化する気が無く作っていいた上記の様なHTMLをリストにしてjsで何らかの処理をする時、
一瞬あれ？ってなるときがあります。
でも、大丈夫。
上と似たような書き方で取得できます。

  var contents = $(".contents > div").length;
  alert(contents);

結果は「４」がアラートします。
「.contents」の直下のdivだけを取得するため間に「>」を挟んでいます。
また、下記の様な書き方でも同様に、直下のdivだけを取得しています。

  var contents = $(".contents").children("div").length;
  alert(contents);

どちらの記述でも結果は、「４」がアラートします。
jQueryでは、子要素などを取得できる関数が用意されているので
覚えておくと、ほかの人が書いたコードもすんなり読むことができます。

子要素に色んなタグがあるけど、関係なく数を取得

  <div class="ironna-tag">
    <p>ピータグ</p>
    <a href="">自分のブログ</a>
    <span>すぱん</span>
    <table>過去の段組み</table>
    <div>でぃぶ</div>
    <img src="/img/img1.jpg" alt="" />
  </div>

上記のようなハチャメチャなHTMLを作ってしまい、さらに「.ironna-tag」の下の要素の数を取得してみる。
結果は、多分下のjsで「６」になると思う。

  var ironna-tag = $(".ironna-tag").children().length;
  alert(ironna-tag);

自信が無いので実際にHTMLを書いてボタンを押すとアラートしてみる。

できたやん！

「６」がアラートされたやん！
試したことなかったので、ちょっと嬉しかった。
こんな変なHTMLからでも数を取得出来るんだね！
勉強になりました。