質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.40%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

629閲覧

複数のリストの中の要素数を個別に数えたい

hana778

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2022/11/29 04:59

前提

リスト(親要素)の子要素の数を数えて、それに応じてクラスを付与したいです。

作ってみたのですが、リストは1つじゃなく複数あるので
そのページの合計子要素になってうまく動きません。

リストごとに分割して子要素の数を数えるにはどうしたらいいでしょうか。

リストに別々のクラスをつけることはできないです。

ご教授いただけますと幸いです。

該当のソースコード

html

1<ul class="BoxList"> 2 <li class="LIst"><span><img src=""></span></li> 3 <li class="LIst"><span><img src=""></span></li> 4 <li class="LIst"><span><img src=""></span></li> 5 <li class="LIst"><span><img src=""></span></li> 6</ul> 7 8<ul class="BoxList"> 9 <li class="LIst"><span><img src=""></span></li> 10 <li class="LIst"><span><img src=""></span></li> 11 <li class="LIst"><span><img src=""></span></li> 12 <li class="LIst"><span><img src=""></span></li> 13 <li class="LIst"><span><img src=""></span></li> 14</ul>

jQuery

1<script> 2$(function() { 3 var size = $(".LIst").length; 4 console.log(size); //結果が9になる 4と5になりたい 5 6 7 if(size === 4) { 8 $("..LIst").addClass("row_4"); 9 } 10 if(size === 5) { 11 $("..LIst").addClass("row_5"); 12 } 13}); 14</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

javascript

1window.addEventListener('DOMContentLoaded', ()=>{ 2const list=[...document.querySelectorAll('ul')].map(x=>x.querySelectorAll('li').length); 3console.log(list); 4});

クラスをつけるならこう?

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 document.querySelectorAll('li').forEach(x=>{ 4 x.classList.add(`row_${x.closest('ul').querySelectorAll('li').length}`); 5 }); 6}); 7</script> 8<ul class="BoxList"> 9 <li class="LIst"><span><img src=""></span></li> 10 <li class="LIst"><span><img src=""></span></li> 11 <li class="LIst"><span><img src=""></span></li> 12 <li class="LIst"><span><img src=""></span></li> 13</ul> 14 15<ul class="BoxList"> 16 <li class="LIst"><span><img src=""></span></li> 17 <li class="LIst"><span><img src=""></span></li> 18 <li class="LIst"><span><img src=""></span></li> 19 <li class="LIst"><span><img src=""></span></li> 20 <li class="LIst"><span><img src=""></span></li> 21</ul>

投稿2022/11/29 05:03

編集2022/11/29 05:08
yambejp

総合スコア116119

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hana778

2022/11/29 05:49

早速のご対応ありがとうございます! ローカルで試してみたら無事できたのですが サーバーに上げるとうまく動きませんでした。エラーなども出ていません。 JavaScriptの書き方が新しい?とうまく読み込まれないことがあるのでしょうか。 (古めの環境で、他の JavaScriptはvarなどになっていたため) 先ほどのjQueryは読み込めているようでした。 すみませんがよろしくお願いします。
yambejp

2022/11/29 06:32

ブラウザは何を想定していますか? エラーがでてないならブラウザのせいじゃないかもしれませんが・・・
hana778

2022/11/29 08:48

ブラウザはChromeなので大丈夫なんじゃないかと思います。 親ページと子ページに分かれていて 読み込むスピードの問題なのかもしれません。
guest

0

質問者様のコードはjQueryですので、jQueryの記法・メソッドを使った手法をご紹介します。

考え方

  • .BoxListを取得する
  • そのそれぞれの子要素.LIstを取得する
  • 取得した子要素に対し、子要素の個数の数字をclass名に付与する

コード例

javascript

1$(function() { 2 $('.BoxList').each(function() { // BoxList2つに対し、それぞれ1つずつ繰り返し処理 3 const $LIs = $(this).children('.LIst'); // 処理中のBoxListの子要素LIstを取得 4 $LIs.addClass(`row_${$LIs.length}`); // LIstの長さが含まれたclass名を付与 5 }) 6}) 7

.each()について

.each()はjQueryオブジェクトに繰り返し処理をしてくれるjQueryメソッドです。
ピュアなJavaScriptの.forEach()と似ています。

第一・第二引数も使用できますが今回は不要のため使用しませんでした。

ちなみに第二引数の現在の要素$(this)と同じ要素を参照します。
が、その要素に対しjQueryメソッドを使いたければ、$(this)の方を使用しましょう。
(今回は.children()というjQueryメソッドを使いたかったので、$(this)を採用しました。)

javascript

1jQueryオブジェクト.each(function(インデックス, 現在の要素) { 2 // 処理 3}) 4 5// 例) 6// こちら、質問者様のコードに追加して実行し、コンソールを確認してみるとわかりやすいと思います。 7$(function() { 8 $('.BoxList').each(function(index, element) { 9 console.group(index); 10 console.log('インデックス:', index); 11 console.log('現在の要素:', element); 12 console.log('this:', $(this)); 13 console.groupEnd(); 14 }) 15})

投稿2022/11/29 08:41

編集2022/11/29 08:56
Cocode

総合スコア2316

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hana778

2022/11/29 08:51

すみません、今気がつきました。 ご説明恐れ入ります。動作サンプルまでありがとうございました!
Cocode

2022/11/29 09:00

はい!jQueryで書きたい場合はよかったらご参考ください。 (もう一人の方の回答はピュアJavaScriptだったので!)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.40%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問