Urgente jquery count itens

02/07/2021

0

Boa noite Devs

Preciso de uma solução para o seguinte problema. A solução tem que ser em javascript ou jquery como preferir.

<div class="produtos">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>

Preciso que uma função jquery, javascript faça o seguinte:

abrir div coluna contar 1,2,3 itens fechar div,

ficaria assim:
<div class="coluna1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="coluna2">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<div class="coluna3">
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>

contar 4,5,6,7,8 fechar div, contar 9,10,11 fechar div

Alguém pode me ajudar?

obrigado!
Flavio Igino

Flavio Igino

Responder

Posts

02/07/2021

Flavio Igino

Como sou novo como dev tenho bastante dificuldade com a criação do meu código, por isso peço ajuda de que já está na jornada a muito mais tempo.

eu fiz algo assim

var produtos = $("ul .item");

var num = $('.produtos').find("li").length;

for(var i = 0; i < produtos .length; i+=3) {
produtos.slice(i, i+3).wrapAll("<div class="coluna"></div>");
}

Porem neste caso, eu consigo criar as colunas a cada 3 itens, eu gostaria de fazer como explicado na abertura do tópico, mas não tenho conhecimento suficiente para ir adiante.

Podem me ajudar galera?
Responder

02/07/2021

Flavio Igino

abrir div coluna contar 1,2,3 itens fechar div,

abrir div coluna contar 4,5,6,7,8 fechar div,

abrir div coluna contar 9,10,11 fechar div

Entendem?
Responder

05/07/2021

Flavio Igino

abrir div coluna contar 1,2,3 itens fechar div,

abrir div coluna contar 4,5,6,7,8 fechar div,

abrir div coluna contar 9,10,11 fechar div

O array() php popula a div mansory com divs item e ela separa os itens por class css (Agrupando os itens com classes iguais colando div col para separ).
<div class="mansory">
<div class="col col-one">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
</div>
<div class="col col-two">
<div class="item2">4</div>
<div class="item2">5</div>
<div class="item2">6</div>
<div class="item2">7</div>
<div class="item">8</div>
</div>
<div class="col col-tree">
<div class="item3">9</div>
<div class="item3">10</div>
<div class="item3">11</div>
</div>
</div>
</div>

A solução para o meu problema acima, é:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script>
$(document).ready(function(){
$cont = $('.mansory div');
$.each($cont, function(k,v) {
if($(v).hasClass('item1')){
$(".mansory > ." + this.className).wrapAll("<div class='col col-one' />");
} else if($(v).hasClass('item2')) {
$(".mansory > ." + this.className).wrapAll("<div class='col col-two' />");
} else {
$(".mansory > ." + this.className).wrapAll("<div class='co col-tree' />");
}
});
});
</script>

Consegui também desenvolver a solução em php.

Obrigado a todos!
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar