Tenho um card-group que preciso saber o valor exato de elementos dentro dele, pois, quero que ao alcançar 3 elementos seja criado outro card-group com 3 elementos e assim por diante... Fiz um card-group com 3 elementos para testar, porém ele está retornando que só possui 1 elemento dentro x.x
Segue o código do card-group e o JS que utilizo nele:
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>