Urgente jquery count itens

jQuery

HTML

CSS

JavaScript

02/07/2021

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

Curtidas 0

Respostas

Flavio Igino

Flavio Igino

02/07/2021

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?
GOSTEI 0
Flavio Igino

Flavio Igino

02/07/2021

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?
GOSTEI 0
Flavio Igino

Flavio Igino

02/07/2021

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!
GOSTEI 0
POSTAR