JavaScriptで同じクラス名の要素数を取得したい

Question

<ul class="name">
 <li></li>
 <li></li>
・
・
</ul>
<ul class="name">
 <li></li>
 <li></li>
・
・
</ul>
<ul class="name">
 <li></li>
 <li></li>
・
・
</ul>
```といったコードで、<li>が1つだけの<ul>に```class="none"```を追加したい場合どう書けばよいでしょうか。

```JS
const len = $('.name > li').length;
if(len === 1) {
  $('.name').addClass('none');
}
```上記だと全ての数になってしまうのですが、クラス名が同じでも各親要素内の子要素数を別個で取得することはできますでしょうか。

Answer 1

複数の要素に対して、それぞれに処理をするときは、each をつかうといいでしょう。

$(".name").each(function(index, element) {
  const len = $(element).children("li").length; 
  if(len === 1) {
    $(element).addClass('none');
  }
})

cssセレクタに、:only-child というのがあるので、それを使うと下記のようにシンプルに記述できます。

$(".name > li:only-child").parent().addClass("none");

:has() を使うとよりシンプルになりますね。

$(".name:has(li:only-child)").addClass("none");

Comments

[auyaa]

:only-child思いつきませんでした。大変助かりました。eachもありがとうございました！