0

Boa tarde, gostaria de saber como faço para trocar posição ao atingir uma quantidade X de elementos na tela utilizando javascript. Exemplo:

Tenho 3 maças no lado direito da tela, ao adicionar a quarta maça 
ela ao invés de ficar do lado direito irá para o lado esquerdo.

Lembrando que o nome da minha div é:

<div class="poster">
 <div class="info">
  maça (lado direito)
 </div>
 <div class="info">
  maça (lado direito)
 </div>
 <div class="info">
  maça (lado direito)
 </div>
 <div class="info">
  maça (ir pro lado esquerdo)
 </div>
</div>

.poster .left {
  right: -318px
}

.poster:hover>.info {
  display: block
}

.poster .info {
  display: none;
  position: absolute;
  top: 10px;
  width: 308px;
  height: 225px;
  border: 1px solid;
  z-index: 3;
  background: rgba(0,0,0,0.98);
  border: 0;
  box-shadow: 0 15px 20px -7px rgba(0,0,0,0.6)
}

.poster .info .title {
  position: relative;
  float: left;
  margin-left: 3px;
  width: 100%;
  border-color: #000;
  color: #fff
}

.poster .info .title h4 {
  float: left;
  width: 100%;
  padding: 10px;
  padding-bottom: 0px;
  padding-right: 50px;
  font-weight: 500;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}

.poster .info .title span.flags {
  padding: 10px;
  position: absolute;
  font-weight: 500;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  right: 0;
  top: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.09);
}

.poster .info .metadata {
  width: 100%;
  float: left;
  padding: 10px 13px;
  font-size: 12px;
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.4)
}

.poster .info .metadata span {
  padding: 5px 10px;
  float: left
}

.poster .info .metadata span.imdb {
  padding: 5px 10px;
  font-weight: 500;
  background: #FFC107;
  color: #000;
  border-radius: 3px
}

.poster .info .metadata span.episodes {
  padding: 5px 10px;
  font-weight: 500;
  background: #000;
  color: #fff;
  border-radius: 3px
}

.poster .info .sinopse {
  padding: 13px;
  float: left;
  width: 100%;
  height: 100px;
  line-height: 20px;
  font-size: 12px;
  overflow: hidden;
  border-bottom: solid 1px rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4)
}

.poster .info .genres {
  float: left;
  width: 100%;
  height: 40px;
  padding: 14px 10px
}

.poster .info .genres .mta {
  width: 100%;
  height: 17px;
  float: left;
  overflow: hidden
}

.poster .info .genres .mta a {
  float: left;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  border-right: solid 1px rgba(255, 255, 255, 0.15);
  color: #fff
}

.poster .info .genres .mta a:hover {
  color: rgba(255, 255, 255, 0.6)
}

.poster .info .genres .mta a:last-child {
  border-right: 0
}

.poster .info:nth-child(-4n+4) {
  left: -318px
}

Obs: lembrando que não quero por o código em CSS e sim utilizar javascript, pq irei implementar um LOOP em PHP na div "poster", para copiar a div "info" e sua informação.

O que devo fazer? Me ajude!

6
  • porque javascript? vocês resolve isso só com html e css Commented 19/12/2019 às 20:47
  • @LeandroAngelo então, é pq html e css vou ter que criar uma função chamada .left { float: left }, e adicionar no class="info left" se vc souber como fazer pra qnd chegar na 4º maça mudar só em CSS e HTML me ensina ai, testo aqui e volto com a resposta pra ti Commented 19/12/2019 às 20:49
  • inclua o seu css Commented 19/12/2019 às 21:12
  • @LeandroAngelo blz Commented 19/12/2019 às 21:19
  • @LeandroAngelo postei agora Commented 19/12/2019 às 21:21

2 Respostas 2

2

Para o que explicou do seu objetivo é melhor fazer por css como a outra resposta já mostrou. Mas para fins de aprendizado, mostro como fazer o que pretende com Javascript.

A lógica é fazer um for sobre todos os elementos da classe info, e a cada multiplo de 4 coloca uma classe diferente.

Exemplo:

const divsInfo = document.getElementsByClassName("info"); //obtem todos os infos

for (let i = 0; i < divsInfo.length; ++i){
  let posicao = i + 1;
  if (posicao % 4 === 0){ //se multiplo de 4
    divsInfo[i].classList.add("esquerda"); //adiciona a classe esquerda
  }
  else {
    divsInfo[i].classList.add("direita"); //adiciona a classe direita
  }
}
.esquerda {
  text-align:left;
}

.direita {
  text-align:right;
}
<div class="poster">
  <div class="info">
    maça (lado direito)
  </div>
  <div class="info">
    maça (lado direito)
  </div>
  <div class="info">
    maça (lado direito)
  </div>
  <div class="info">
    maça (ir pro lado esquerdo)
  </div>
    <div class="info">
    maça (lado direito)
  </div>
  <div class="info">
    maça (lado direito)
  </div>
  <div class="info">
    maça (lado direito)
  </div>
  <div class="info">
    maça (ir pro lado esquerdo)
  </div>
</div>

Fazendo para a 3 direita e 2 para a esquerda a cada cinco:

const divsInfo = document.getElementsByClassName("info");

let posicaoColuna = 1;

for (let i = 0; i < divsInfo.length; ++i) {
  if (posicaoColuna <= 3) { // de 1 a 3 para a direita
    divsInfo[i].classList.add("direita"); 
  } else { // de 4 a 5 para a esquerda
    divsInfo[i].classList.add("esquerda"); 
  }
  
  posicaoColuna++;
  if (posicaoColuna > 5){
    posicaoColuna = 1;
  }
}
.esquerda {
  text-align: left;
}

.direita {
  text-align: right;
}
<div class="poster">
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>
  <div class="info">
    maça
  </div>

</div>

9
  • Cara obrigadão de coração, você super me ajudou demais ... era isso que eu precisava Commented 19/12/2019 às 22:05
  • Se não for abusar demais tipo o exemplo tá certo, como eu add só +1 maça do lado esquerdo, a cada 3 maça no lado direito, 2 no esquerdo? Commented 19/12/2019 às 22:07
  • @FamíliaJJ 3 na direita , 2 na esquerda e volta 3 direita e 2 esquerda novamente ? E assim por diante ?
    – Isac
    Commented 19/12/2019 às 22:08
  • Isso, por que o meu conteúdo é 3 para direita e 2 para esquerda ai da um total de 5 items por coluna Commented 19/12/2019 às 22:09
  • @FamíliaJJ Já editei a resposta, veja se era isso que estava a procura.
    – Isac
    Commented 19/12/2019 às 22:13
1

Você consegue fazer isso só com html e css. O css tem um recurso chamado selectors que você consegue usar para isso. https://www.w3schools.com/cssref/css_selectors.asp

Para ser mais específico o seletor nth-child pode te ajudar ele aplica o estilo apenas para o enésimo elemento filho, e usando n+ a partir do enésimo, ou seja o código abaixo muda o alinhamento para esquerda a partir do 4° elemento.

.info {
  text-align: right;
}
.info:nth-child(n+4) {
  text-align: left;
}
<div class="poster">
 <div class="info">
  maça (lado direito)
 </div>
 <div class="info">
  maça (lado direito)
 </div>
 <div class="info">
  maça (lado direito)
 </div>
 <div class="info">
  maça (ir pro lado esquerdo)
 </div>
 </div> 

4
  • seu código está excelente, mas não resolveu meu problema, pq eu preciso pegar na vdd o 5º e 6º elemento da esquerda pra direita, pq ai qnd chegar no 5º e 6º elemento vai vim da esquerda pra direita consegue me ajudar? Commented 19/12/2019 às 21:33
  • não sei se entendi, mas se for só para o 4° elemento ficar a esquerda, muda nth-child(n+4) para nth-child(4). assim só o 4° elemento vai receber o estilo. Commented 19/12/2019 às 21:51
  • man vc tem alguma rede social q consiga me ajudar? ou vim Team Viewer? to com uma seria dificuldade no meu código Commented 19/12/2019 às 22:00
  • então, não sou muito ativo em redes socias. e sobre suas dúvidas elas são meio de principiante, te aconselho fazer algum curso de desenvolvimento web. tem muitos bons na udemy e tem alguma coisa no youtube tbem. Commented 20/12/2019 às 16:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .