同じクラス名のついた、子要素の数え方を回答いただければと思います。
1. li タグ が 5つあるので、そのような出力にしたいのです。
2. 各 ul の li タグの数を出すには、どのようにすればよいのでしょうか ?
どうぞ、皆様よろしくおねがいいたいします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<ul class="myClass">
<li>1</li>
<li>2</li>
</ul>
<ul class="myClass">
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
try {
var chiledNodes = [];
function userFunc( parent ) {
chiledNodes = document.querySelector( parent ).children;
alert ( chiledNodes.length );
}
} catch( e ) {
alert( e );
}
userFunc( '.myClass' );
</script>
</body>
</html>
No.2ベストアンサー
- 回答日時:
UL要素の一覧を取り、個々にLI要素を勘定し、結果を配列とする簡単なやり方
var 結果 = [].map.call(
document.querySelectorAll('ul.myClass'),
function(ul){return ul.querySelectorAll('li').length}
);
// 質問の HTML を対象に実行すれば、結果 = [2, 3]
余談ではありますが、以下の関数は間違いやすいのでご注意ください
document.querySelector() - 該当する最初の一件だけをとる
document.querySelectorAll() - 該当する全てをとる
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【javascript で動的に a タグ...
-
ネストされたチェックボックス...
-
どの<li><a> が押されたか判別...
-
多階層ドロップダウンのスマホ...
-
文字と数字が混在する要素のsor...
-
JavaScriptのクッキーによるリ...
-
javascriptで、クリックしたら...
-
複数の画像をランダム(シャッ...
-
javascriptでEnterキーをtabキ...
-
jQueryセレクタ/複数要素の指...
-
javascriptで正規表現の検索が...
-
【jQuery】hoverしたn秒後にイ...
-
同一ページ内で、任意の文字列...
-
jQueryで、リンクURLの一致を確...
-
アコーディオン自動開閉メニュ...
-
クリックした<a>タグのみにClas...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
HTMLで条件分岐はできますか?
-
HTMLですCSSです 画像のように...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
JQueryタブのアクティブ アン...
-
javascriptでEnterキーをtabキ...
-
「jQuery」アコーディオンメニ...
-
【jQuery】遅延実行(タイムラ...
-
ネストされたチェックボックス...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
文字と数字が混在する要素のsor...
-
Jquery の slide.toggle で要素...
-
【jQuery】hoverしたn秒後にイ...
-
チェックボックスに入っている...
-
クリックで表示、非表示するメ...
-
同一ページ内で、任意の文字列...
-
オンマウスで画像ロールオーバ...
-
javascriptで、クリックしたら...
-
PHPでログインフォーム
-
<li>タグの順番を入れ替える方法
-
jQuery タブメニューへのダイ...
おすすめ情報