Urgente jquery count itens
02/07/2021
0
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
Posts
02/07/2021
Flavio Igino
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?
02/07/2021
Flavio Igino
abrir div coluna contar 4,5,6,7,8 fechar div,
abrir div coluna contar 9,10,11 fechar div
Entendem?
05/07/2021
Flavio Igino
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!
Clique aqui para fazer login e interagir na Comunidade :)