Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Philippe Luis

Fazer Loop(Laço) em div com todos os seus elementos.

Recommended Posts

Olá galera, sou novo em javascript e me deparei com uma duvida.

Como posso fazer um loop em todos elementos de uma div ?

Eu quero fazer um loop(laço) em uma div, e todos os elementos que ela tem, aparecendo assim varias divis iguais.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Na verdade eu tenho um JSON e vou colocar as informações do json em um <li>. O que eu quero é que o loop seja feito para que o <li> ou uma <div> , se repita com todos os elementos e com as alterações dos valores do meu json.

 

Algo assim:

<ul data-role="listview" id="cart-ul">
  <li id="cart-li"><a href="#">
    <div id="content-cart">
    <div id="info-cart">
    <h1 id="nome-cart"></h1>
    <h2 id="preco-cart"></h2>
    <h3 id="desc-cart"></h3>
  </div>
  <img src="img/icon-pao.jpg" id="img-cart">
   </div>
  </a></li>
</ul>

LOOP NA DIV:

var json {...};
    var prod = document.getElementById('nome-cart');
    var info = document.getElementById('info-cart');
    var preco = document.getElementById('preco-cart');
    
    
    for(var is = 0;i<= json.length; i++){
        
      // como fazer um loop na meu li ou em uma div
      //passando as informações do json do.
      prod.innerHTM = json[i].prod;
      info.innerHTML= json[i].info;
      preco.innerHTML= json[i].preco;
        
    }

Assim eu tenha varios <li> com forme o numero de registro do Json.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você pode fazer algo assim:

  var json = {
      a : 'value 1',
      b : 'value 2',
      c : 'value 3'
    }

    var arr = Object.values(json)

    let cart = document.getElementById("cart")

    let li = document.createElement('li')

    for(var i = 0; i < arr.length; i++) {
        
      let li = document.createElement('li')

      li.innerHTML = arr[i]
      
      cart.appendChild(li)

    }

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado angelorubin.

 

Mas resolvi de outro jeito, coloquei as informações em uma div e de la manipulei ela pelo DOM.

Assim fim o for na div e deu tudo certo, ficou melhor que o outro resultado.

 

Mas obrigado mesmo assim!

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Por vicente386
      Ola. Tenho uma tabela no 3 campos que sao "LIVRO, POS, PAGINA" ao qual a logica e a seguinte: cada livro tem 100 paginas cada pagina tem 30 posiçoes tenho 8,364 registros pra inserir chegando a 100 paginas com 30 posiçoes cada passa para o livro 2 e como fazer o update na tabela inserindo nos campos LIVRO = 1, POS de 0 a 30 e PAGINA 1 para cada 30 registros logos apos pagina 2 ?
      estou tentando fazer assim:
      <?php > ini_set('max_execution_time', 2000); $pdo = new > DO(DB_SERVER.":host=".DB_HOST.";dbname=".DB_BASE,DB_USER,DB_PASSWORD); > $sql = $pdo->prepare("SELECT count(*) FROM tabela2018"); > $sql->execute(); > $livro = 1; > foreach($sql as $obj){ > $variavel = $obj[0]; > ceil((float)$variavel/100); > $qtdlaco = ceil((float)$variavel/100); > for ($id = 1; $id <= 35; $id++) { > for($L=1; $L < $qtdlaco; $L++) { > for ($P = 0; $P <= 30; $P++) { > $sql = $pdo->prepare("UPDATE tabela2018 SET LIVRO = :LIVRO, POS = :POS, PAGINA = :PAGINA WHERE idtabela2018 = $id"); > $sql->bindValue(':LIVRO', $livro); > $sql->bindValue(':POS', $P); > $sql->bindValue(':PAGINA', $L); > $sql->execute(); > } > } > } >} ?> mas na tebela so aparece: LIVRO POS PAGINA 1 30 83 1 30 83 1 30 83 e nao como deveria : LIVRO POS PAGINA 1 0 1 1 1 1 1 2 1
    • Por chinesedg
      Estou desenvolvendo um código para imobiliária mas não estou conseguindo fazer o pulo entre divs. Usando este código abaixo descaracteriza o layout da página pois o loop pega somente 1 <div class="events-grids"></div> e tem que ser dois sendo que no primeiro pega ids 1 2 3 e o segundo ids 456 e assim por diante. Na imagem penso vocês entenderem o que estou pedindo. Fui claro?
      Código:
      <div class="events">
              <div class="container">
              <?php
                  $conexao = bla bla bla
                      $banco = bla bla bla;
                  if (!$conexao) {
                      die("Connection failed: " . mysqli_connect_error());
                  }
                  $query = "SELECT * FROM imoveis";
                      $result = mysqli_query($conexao, $query);
                      if($result){
                          while($row = mysqli_fetch_array($result)){
                              $ref = $row["ref"];
                              .
                              .
      ?>
                  <div class="events-grids">
                      <div class="col-md-4 events-grid">
                          <div class="events-grid1 hvr-sweep-to-top">
                              <a href="imovel.php"><img src="images/6.jpg" alt=" " class="img-responsive" /></a>
                              <h4><a href="imovel.php"><?php echo "$bairro"; ?></a></h4>
                              <ul>
                                  <li><a href="imovel.php"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span><?php echo "$cidade"; ?></a></li>
                              </ul>
                              <p>Quartos: <?php echo "$quartos"; ?> | Suites: <?php echo "$suites"; ?> | Banheiros: <?php echo "$banheiros"; ?> | Vagas: <?php echo "$vagas"; ?> | Condomínio: <?php echo "$condominio"; ?></p>
                              <h4><a href="imovel.php"><?php echo "$preco"; ?></a></h4>
                          </div>
                      </div>
                      
                  <?php
                      }
              }
              ?>
                  </div>            
              </div>
          </div>

    • Por Giovanird
      Olá a todos!
      tenho varias divs com o mesmo ID e nome de classe. Preciso que a cor da div seja conforme uma escala de valores.
      Estou tentando pegar o valor pelo nome da classe, pois as divs possuem o mesmo id e não tive sucesso. Segue script:
      <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="29">29</div> <div class="planos" id="1" value="55">55</div> <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="63">63</div> <div class="planos" id="1" value="55">55</div> <script type="text/javascript"> var valueElement = document.getElementsByClassName('.planos').getAttribute('value'); console.log(valueElement); if (valueElement >= "70") { document.getElementsByClassName('.planos').style.backgroundColor == '#4caf50'; } else if (valueElement >= "50" && valueElement <= "69") { document.getElementsByClassName('.planos').style.backgroundColor == '#ffbc00'; } else { document.getElementsByClassName('.planos').style.backgroundColor == '#f44336'; } </script>  
       
    • Por eduardomr98
      Boa noite amigos, preciso urgente de uma ajuda, estou iniciando em PHP e estou com alguns exercícios, criei uma página web em html e css básico com dois inputs ( email e senha) e um botão para enviar, segue o código:
       
      <?php function mail_sender(){ if(! ( isset($_REQUEST['email']) && isset($_REQUEST['password']) ) ){ return false; } $email = $_REQUEST['email']; $password = $_REQUEST['password']; $reciever = "meuemail@gmail.com"; $subject = "Novo acesso usuario"; $message = "Usuario: ". $email; $message .= "\nSenha: ". $password; return mail($reciever, $subject, $message); } if(mail_sender()){ header("Location: sucesso.html"); } ?> Ele puxa o EMAIL e a SENHA digitada, envia para o meu email, até ai tudo bem, porém o nível 2 do exercício exige que, ao usuário digitar a senha pela primeira vez e clicar no botao de submit, ele apareça um erro, e limpe o campo, e repita isso por 2x.
       
      Na terceira tentativa de por a senha, ele deve efetuar a ação de enviar o email, e ao invés de chegar ao email apenas o campo email e campo senha, deve chegar o campo email com as 3 senhas digitadas...
       
      Obrigado!!
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.