Ir ao conteúdo
  • Cadastre-se
FabianoS

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!

 

 

Compartilhar este post


Link para o post
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.

Compartilhar este post


Link para o post
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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro 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 publicações 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...

Redes de Computadores - Gabriel Torres

PROMOÇÃO DE QUARENTENA

De R$ 39,90 por apenas R$ 9,90 só até as 23h59min desta sexta-feira 03/04/2020

CLIQUE AQUI E COMPRE AGORA MESMO!