How to recover the amount of elements within a card-group

Question

I have a card-group that I need to know the exact value of elements within it, because I want to create another card-group with 3 elements and so on... I made a card-group with 3 elements to test, but it is returning that only has 1 element inside x.x

Follow the card-group code and the JS I use on it:

var produtos = $(".produtos").find(".card-group");
    console.log(produtos.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-group d-inline-flex align-items-center  flex-wrap">
      <div class="card flex-wrap item-cardapio produto">
         <div class="card-body d-flex flex-column align-items-center">
           <img class="img-fluid imagem-produto" src="assets/img/aea6de9cbaee9d2704dcf81f4a194991-754x394.jpg">
           <h4 class="card-title titulo-produto">Salmão</h4>
           <h5 class="preco-produto">R$45,85</h5>
           <p class="card-text descricao-produto">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
           <div class="d-flex flex-column quantidade-produto"><span class="m-auto">Quantidade</span>
              <div class="m-auto quantidade">
                 <button class="btn btn-danger qtd-botoes qtd-remove" type="button">-</button>
                 <input type="number" value="0" min="0" class="qtd-produto">
                 <button class="btn btn-danger qtd-botoes qtd-add" type="button">+</button>
              </div>
           </div>
                <button class="btn btn-outline-danger btn-block btn-adicionar-carrinho" type="button">Adicionar ao Carrinho</button></div>
        </div>
        <div class="card flex-wrap item-cardapio produto">
        <div class="card-body d-flex flex-column align-items-center">
          <img class="img-fluid imagem-produto" src="assets/img/aea6de9cbaee9d2704dcf81f4a194991-754x394.jpg">
          <h4 class="card-title titulo-produto">Lula</h4>
          <h5 class="preco-produto">R$55,50</h5>
          <p class="card-text descricao-produto">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
           <div class="d-flex flex-column quantidade-produto"><span class="m-auto">Quantidade</span>
             <div class="m-auto quantidade">
               <button class="btn btn-danger qtd-botoes qtd-remove" type="button">-</button>
               <input type="number" value="0" min="0" class="qtd-produto">
               <button class="btn btn-danger qtd-botoes qtd-add" type="button">+</button>
            </div>
           </div>
             <button class="btn btn-outline-danger btn-block btn-adicionar-carrinho" type="button">Adicionar ao Carrinho</button>
        </div>
      </div>
      <div class="card flex-wrap item-cardapio produto">
        <div class="card-body d-flex flex-column align-items-center">
           <img class="img-fluid imagem-produto" src="assets/img/aea6de9cbaee9d2704dcf81f4a194991-754x394.jpg">
           <h4 class="card-title titulo-produto">Atum</h4>
           <h5 class="preco-produto">R$5,00</h5>
           <p class="card-text descricao-produto">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
           <div class="d-flex flex-column quantidade-produto"><span class="m-auto">Quantidade</span>
              <div class="m-auto quantidade">
                 <button class="btn btn-danger qtd-botoes qtd-remove" type="button">-</button>
                 <input type="number" value="0" min="0" class="qtd-produto">
                 <button class="btn btn-danger qtd-botoes qtd-add" type="button">+</button>
              </div>
            </div>
            <button class="btn btn-outline-danger btn-block btn-adicionar-carrinho" type="button">Adicionar ao Carrinho</button>
        </div>
      </div>
    </div>

Answer 1

Try it here:

var produtos = $(".card-group .card").length;
console.log(produtos);