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

jQueryで要素の数を取得|divやliを数える
この記事は約3分で読めます。
広告

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);

結果は、「5」がアラートします。
「.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);

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

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

どちらの記述でも結果は、「4」がアラートします。
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で「6」になると思う。

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

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

// .ironna-tagのHTML

ピータグ

自分のブログ
すぱん

過去の段組み

でぃぶ

結果をアラートするボタン

できたやん!

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

エンデ・バタローをフォローする
javascriptjQueryサイト制作

埼玉県北本市に越してきて2年と少しになります。以前は東京都の京王線沿線に、その前は神戸の三宮、さらにその前は名古屋の八事霊園近くに住んでいました。

怖い話が大好きで、ネット怪談、ホラー小説、心霊Youtuber(オウマガドキch、ゾゾゾ)を寝る前のお供にしてます。

フロントエンドエンジニアとして9年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

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