I have a card-group that needs to know the exact value of elements inside it, because, I want to achieve 3 elements to create another card-group with 3 elements and so on ... I made a card-group with 3 elements to test, however it is returning that only has 1 element inside xx
Follow the card-group code and JS that I use in 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><divclass="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>