listタグの数がいくつあるのか知りたいなと思ったので、listタグの数を調べる方法を調べてみました。listタグでなくても調べられます。
やりたいこと
下記のようなhtmlがあったとしてlistタグの数をJavascriptで取得する方法を調べます。
<ul id="id1" class="class1">
<li>List1</li>
<li>List2</li>
<li>List3</li>
</ul>jQueryで取得する
jQueryでlistタグの数を取得してみます。
サンプルコード
codepenで作成してみました。
See the Pen how to get li length in jQuery by Nakamoto (@programmerlife) on CodePen.
jQueryでlistタグの数を取得するにはlengthを使用します。
上記例では以下の文を使用し取得しています。
let count = $(“#id1 li”).length;
クラスで取得する場合はセレクタ “#id1 li” を “.class1 li” にしてあげれば取得可能です。ただこの場合はidで取得するのが一般的なようです。
jQueryだと簡単に取得できます。
Javascriptで取得する
jQueryを使用せずにlistタグの数を取得してみます。
サンプルコード
codepenで作成してみました。
See the Pen how to get li length in vanilla JS by Nakamoto (@programmerlife) on CodePen.
JavascriptではchildElementCountを使用してlistの数を取得しています。
上記例では以下の文を使用し取得しています。
const elm = document.getElementById(“id2”);
const childCount = elm.childElementCount;
クラスで取得したい場合はdocument.getElementsByClassName(“class2”);のようになります。
querySelectorAllを使っても長さは取れました。
document.querySelectorAll(“ul li”).length;
querySelectorAll本当に便利。ただせっかく用意されているのでchildElementCountを使うのが良さそうです。
おわり
jQueryだとlistの数もlengthとして取得できるんですね。
余談ですがjQueryは将来的に勉強しなくてもいいかなと思っていたのですが、まだWebサイトの70％はjQueryを使っているから覚えて損はないという記事をみかけたので、jQueryも少しずつ取り入れていこうかなと思っています。
参考
https://www.w3schools.com/jsref/prop_element_childelementcount.asp
