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

jQueryで要素の数を取得|divやliを数える javascript
この記事は約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からでも数を取得出来るんだね!
勉強になりました。

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

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

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

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

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

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

コメント

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