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

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

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

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

jQuery

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

Q&A

解決済

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

hana778
hana778

総合スコア10

JavaScript

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

jQuery

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

2回答

0グッド

1クリップ

194閲覧

投稿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>

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

2

ベストアンサー

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

総合スコア109059

spoofy_dragon, miyabi_takatsuk👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

hana778

2022/11/29 05:49

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

2022/11/29 06:32

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

2022/11/29 08:48

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

1

質問者様のコードは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

総合スコア2231

spoofy_dragon👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

hana778

2022/11/29 08:51

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

2022/11/29 09:00

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

jQuery

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