Подсчитайте элементы div и добавьте класс в их родительский контейнер

Question

Будучи абсолютным новичком в jquery, я ищу способ подсчитать элементы / классы div в родительском div и добавить класс к этому родительскому элементу в зависимости от того, сколько элементов присутствует.

<div class="container four_items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

в приведенном выше примере div "контейнер" добавляется к классу "four_items", поскольку он содержит четыре элемента

<div class="container three_items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

последовательно, в этом примере родительский контейнер добавлено "thee_items", так как он содержит три экземпляра div с классом "item"

любая помощь приветствуется

Answer 1

Используя numeri c class items_3, вы можете сделать это с помощью

$(".container").addClass(function() {
  return "items_" + $(this).children(".item").length;
});

, если вам нужно «три» в качестве текста, тогда это можно проиндексировать в текстовый массив (как подробно описано в другой ответ, поэтому здесь не будет дублироваться).

Пример фрагмента с некоторыми css, чтобы показать, что происходит:

$(".container").addClass(function() {
  return "items_" + $(this).children(".item").length;
});

.container { float:left; height: 50px; width: 50px; }
.container>.item { border:1px solid #CCC; height:10px; width: 10px; }

.items_4 { border: 1px solid red; }
.items_3 { border: 1px solid green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 2

Вы можете сделать что-то вроде этого, вам нужно установить строку чисел внутри массива, например, мудрый, который я определил в приведенном ниже примере num, я уже установил для него условие, если он не найден, он добавит numeri c count на нем.

$(document).ready(function(){
    
    // you can add list of numbers as you want
    let num = [
      "zero",
      "one",
      "two",
      "three",
      "four",
      "five"
    ];
    
    // find number of elements
    let num_of_item = $(".container .item").length;
    
    // check if element number is available then its return vlaue from num otherwise its will return original length number
    let find_item_num = num[num_of_item] ? num[num_of_item] : num_of_item;
    
    // this will add "three_items" class in ".container" class   
    $(".container").addClass(find_item_num + "_items");

    // show the list of classes
    console.log($(".container").attr("class"));
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>