Ir ao conteúdo
  • Cadastre-se

JQuery Dividir lista em 3 partes e adicionar Div.


Posts recomendados

Ola, 

Venho aqui pedir ajuda de vocês, pois já não sei mais o que fazer, pesquisei em tudo mas não achei nada relacionado.

Bom o intuito e fazer uma galeria de 3 colunas usando o de flex do CSS(https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp), com base no código do w3s, porém as imagens vai vim dinamicamente então me complicou um pouco.

 o código que fiz usando os seletores "lt()" e "gt()"  pega exatamente a quantidade de itens e divide por 3 que é o numero de colunas, que vai dar a quantidade de itens para cada coluna, depois ele agrupa em uma div o numero de itens, mas não consigo uma forma de selecionar os itens do meio, só começo e o final.

 

https://jsfiddle.net/huqkozsr/5/

var itens = $(".img_").length;
var padrão = parseInt(itens / 3);
var coluna3 = (itens - padrão) - 1;
var coluna1 = $(".img_:lt("+padrão+")").wrapAll("<div class='flex_'></div>");
var coluna3 = $(".img_:gt("+coluna3+")").wrapAll("<div class='flex_'></div>");

https://i.imgur.com/mD5btQr.png

 

agradeço a ajuda!

 

 

Link para o comentário
Compartilhar em outros sites

No caso consegui adicionando + 1 somando assim a variável padrão com 1.

var coluna1 = $(".img_:lt("+padrão+1+")").wrapAll("<div class='flex_'></div>");

No caso o problema é que a propriedade length retorna o número de elementos e não a quantidade de índices no objeto nodeList que é do que os seletores :lt() e :gt() necessitam. Para isso é só acrescentar um - 1 nos item. Os índices iniciam-se em 0, o length inicia-se em 1 e acabará com um a mais. Você tem 27 quadrados, mas os índices no objeto nodeList começam em 0, então torna-se 26.

var padrão = parseInt(itens-1 / 3);

Ou fazer como o primeiro exemplo que é o mesmo.

Link para o comentário
Compartilhar em outros sites

@Adriano_web Obrigado pela ajuda mas realmente não conseguir entender o que me passou, no caso a "var padrão" é o numero de itens divido por 3, que é o numero de colunas, esses itens vai chegar dinâmica, então a quantidade sempre chega diferente, bom eu vi suas alteração no JSFiddle mas caso queira postar seu código agradeço, pode ser que não tenha entendido, no momento eu consegui chegar em um resultado mas não esta totalmente certo ainda. 

 

https://jsfiddle.net/Lraqz16c/

obs: tive que mudar para 4 colunas

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...