1

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>

1 Resposta 1

0

Tenta isso aqui:

var produtos = $(".card-group .card").length;
console.log(produtos);
2
  • Funcionou perfeitamente amigo, muito obrigado =D acho que da forma que eu estava fazendo ele recuperava somente 1 já que o valor que ele tava pegando era a quantidade de card-group dentro do .produtos e não os cards dentro do card-group Commented 15/06/2018 às 16:04
  • Exatamente isso!
    – Sérginho
    Commented 15/06/2018 às 17:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .