Urgente jquery count itens
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!
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
Curtidas 0
Respostas
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?
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
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?
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
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!
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