Ir para conteúdo
Marcosvn

gerar lista de links âncoras dinamicamente

Recommended Posts

Eu preciso criar uma funcao que pegue todas as tags <h2> dentro da sessao <article> 

 

Basicamente oq eu quero fazer eh gerar um índice de links ancoras dinamicamente para deixar logo no inicio da pagina e, assim o usuario acessar diretamente o topico de interesse.

 

Porem eu nao faço ideia por onde comecar essa função. Alguem pode me dar a direcao ??

 

imagino que devo pegar cada tag H2 e armazenar numa variavel. Porem nao sei como faço isso

 

Outro problema eh q vou precisar inserir a atributo id="#<h2>"  tbm dinamicamente

 

nao sei se estou pensando certo ou se existe outras alternativas pra chegar nesse resultado. Mas qualquer esclarecimento ja ajuda

 

vlw

Compartilhar este post


Link para o post
Compartilhar em outros sites

Para mim não ficou claro como deveria usar as informações dos elementos H2.

Então o que vou mostrar é um pequeno e simples exemplo de como capturar dados desses elementos

<article id="buscar_por_isso">
    <h2 data-html5="event-a">Primeiro</h2>
    <h2 data-html5="event-b">Segundo</h2>
    <h2 data-html5="event-c">Terceito</h2>
</article>
<hr />

<div id="exemplo"></div>

<script>
    var article = document.getElementById('buscar_por_isso'); // Armazenar o conteúdo de busca
    var h2 = article.getElementsByTagName('h2'); // Busco todas tag H2 dentro da var article
    var quantidade = h2.length; // Conta quantos h2 existem
    
    var exemplo = document.getElementById('exemplo'); // Só por exemplo mesmo
    
    for (var i = 0; i < quantidade; i++) { // fazendo um loop para indexar dinamicamente cada h2
        exemplo.innerHTML += h2[i].innerText + '<br />'; // Pegando o conteúdo de texto dentro de cada h2 e escrevendo em outro lugar
        h2[i].id = 'identificador-' + i; // Acionando um #ID em cada h2
        //h2[i].dataset.html5; // isso por exemplo pega o valor do data de cada h2   
    }
</script>

 

Logo isso é questão de javascript e não PHP

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

3 horas atrás, Omar~ disse:

Para mim não ficou claro como deveria usar as informações dos elementos H2.

Então o que vou mostrar é um pequeno e simples exemplo de como capturar dados desses elemento

 

 

Então Omar, adoraria (se possível) fazer essa função em php por eu estar mais familiarizado com o PHP. Mas se for melhor fazer com javascript eu posso tentar.

 

Mas veja, o que eu quero fazer é basicamente isso:

vkYBvke.png

 

Porém todas as Tag <h2> estão detro de:

<div class="article-content"> 
  <h2>Título 1</h2>
  <h2>Título 2</h2>  
  <h2>Título 3</h2>       
</div>

 

Além disso, eu preciso incluir a âncora em cada tag <H2>, por exemplo:

<div class="article-content"> 
  <h2 id="titulo1">Título 1</h2>
  <h2 id="titulo2">Título 2</h2>  
  <h2 id="titulo3">Título 3</h2>       
</div>

Pra poder criar o link âncora para cada tag H2 conforme na primeira imagem. Deu pra entender ? E por fim tudo deveria sair basicamente assim:

<ul>
   <li><a href="#titulo1">Título 1</a></li>
   <li><a href="#titulo2">Título 2</a></li>
   <li><a href="#titulo2">Título 2</a></li>
</ul>

 

Javascript é a melhor maneira de resolver isso ? A página que estou trabalhando possui mais de 500 artigos e fazer isso manualmente é inviável

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sim, pelo que deu para sacar você está obtendo dados vindo do banco.

Sendo assim esses dados estão em array, então basta usar o php para escrever os elementos

Exemplo (no caso $array seria um array obtido de dados do banco)

 

<?php
$array = [
    0 => [
        'titulo' => 'titulo1',
        'conteudo' => 'bla bla bla'
    ],
    1 => [
        'titulo' => 'titulo2',
        'conteudo' => 'bla bla bla'
    ],
    2 => [
        'titulo' => 'titulo3',
        'conteudo' => 'bla bla bla'
    ]
];

$contagem = 0;
$lista = "<ul>";
foreach ($array as $v) {
    $contagem ++;
    $lista .= "<li><a href=\"#{$v['titulo']}\">Título {$contagem}</a></li>";
}
$lista .= "</ul>";

echo ($lista);

No caso percorro esse array buscando informações para completar a escritura dos elementos que desejo.

Perceba a situação, pois abordei em caso não houver um índice para capturar para escrever o número tipo titulo1... 2...

usei uma var que se alto incrementa a cada volta do loop.

 

Em 29/08/2018 at 11:07, Marcosvn disse:

Javascript é a melhor maneira de resolver isso ? A página que estou trabalhando possui mais de 500 artigos e fazer isso manualmente é inviável

Depende da situação, pois com ambos você pode escrever a página.

A diferença é que o PHP não pode manipular a página depois de carregada, e o javascript só consegue manipular depois que a página é carregada.

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

  • Conteúdo Similar

    • Por LuanMartinsTI
      Tenho o seguinte problema, eu preciso dar um select em duas tabelas, ou ter dois selects tanto faz, eu fiz com inner join e com union all mas nao consigo ter o resultado que eu desejo
      O problema é o seguinte> Pra saber quantos usuarios eu tenho em cada grupo eu preciso dar um select na membros grupo com o id do grupo, mas eu preciso mostrar apenas os 5 primeiros grupos com mais gente, eu nao tenho na tabela falando grupo 1 tem 50 membros, eu tenho 50 linhas com grupo 1 e id do usuario, como eu transformo isso no que eu quero? a unica forma q eu pensei é criar um campo novo em grupos e colocar la o resultado de rowCount, mas gostaria de saber se é possivel fazer sem, eu ja consigo mostrar quantos usuarios cada grupo tem, eu nao consigo mostrar é em ordem e nao é so dar o asc o problema é na logica provavelmente, mas se for possivel resolver isso com uma unica query ficarei grato
      tabela 1
      grupos( id nome dono created stat ) tabela 2
      membros_grupo( id grupo_id user_id )  
      PHP
      public function ultimosGrupos($limite){ try { $query = "SELECT * FROM groups ORDER BY id ASC LIMIT :limite"; $this->Select = $this->Conn->prepare($query); $this->Select->bindParam(':limite' , $limite, PDO::PARAM_INT); $this->Select->execute(); if($this->Select->rowCount() > 0){ return $this->Select->fetchAll(PDO::FETCH_ASSOC); }else{ return FALSE; } } catch (PDOException $exc) { exibeMensagens("Erro ao consultar. {$exc->getMessage()}", WS_ERROR); } } public function users_por_grupo($id){ try { $query = "SELECT * FROM group_memberships WHERE group_id = :id"; $this->Select = $this->Conn->prepare($query); $this->Select->bindParam(':id' , $id, PDO::PARAM_INT); $this->Select->execute(); return $this->Select->rowCount(); } catch (PDOException $exc) { exibeMensagens("Erro ao consultar. {$exc->getMessage()}", WS_ERROR); } }  
    • Por Robson Augusto
      Galera se alguém souber o que ocorre,  é o seguinte, não acredito que possa ser Problema de SEO, mas vamos lá meu site anuncicarbh.com, não aparece em pesquisa feitas pelo computador, com a palavra chave "seminovos bh", ele aparece na primeira oscilando para segunda pagina do bing e yahoo, fazendo a pesquisa pelo telefone, ja no pc ele nao aparace mais no yahoo, mas continua a aparecer no bing, ja no google ele teve pequenas aparições na terceira página, agora em ambas as pesquisas de pc e celular ja não aparece mais no google... So aparece atualmente no google, pesquisando pelo nome do site... Alguem saberia me dizer o por que disso? será SEO?
    • Por martinazzo
      Olá pessoal,
       
      sou novo por aqui e não sei bem como funciona, mas sei que preciso de uma ajuda kkkkk
      se puderem me dar uma mão ficaria grato;
       
      Estou tendo problemas em como pegar id de uma linha clicada em uma table, que já recebe os dados de um bd. Eu gostaria de poder editar os campos e salvar no banco de dados usando o ID da linha clicada;
       
      Vou colar o código abaixo, não reparem na bagunça kkkkk
       
      conexao.php
       
      <?php
      $server = "XXXXX";         Conferido e esta correto;
      $username = "XXXXX";  Conferido e esta correto;
      $password = "XXXXX";  Conferido e esta correto;
      $dbname = "XXXXX";     Conferido e esta correto;
      $conn = mysqli_connect($server, $username, $password, $dbname);
      ?>
       
      altera.php
       
      <?php 
      $link = mysqli_connect("XXXXXX", "XXXXX", "XXXXX", "XXXXXX"); Conferido
      $sql = "SELECT * FROM interface ";
      $consulta = mysqli_query($link, $sql);
      ?>
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <meta http-equiv="refresh" content="30">
      <link rel="stylesheet" type="text/css" href="style.css">
      <script src="sorttable.js"></script>
      <title>Dashboard</title>
      <?php 
      session_start();
      if(!isset($_SESSION['login']) and !isset ($_SESSION['senha'])){
          session_destroy();
        unset($_SESSION['login']);
        unset($_SESSION['senha']);
        header('location:index.html');
        
        }
        
      ?>

      </head>
      <body>
      <a href="index.php"><img src="img/ditec_smart_hor_150px.png"></a>
      <div class="borda_titulo">
      <h2><center>DIMILK | Equipamentos</font></h2></center></div><br /><br />
      <form name="equipamento" action="salva.php" method=post>
      <center><table id="minhaTabela" border="3" class="sortable" bgcolor="#1E90FF">
        <tr>
        <th><center>ID </center></th>
        <th><center>MAC</center></th>
        <th><center>Habilitado</center></th>
        <th><center>Descrição</center></th>
        <th><center>Altura Tarro</center></th>
        <th><center>Área Tarro</center></th>
        <th><center>Alterar</center></th>
        </tr>
        
          <?php while($registro = mysqli_fetch_assoc($consulta)){
              echo '<tr bgcolor="#ADD8E6" scope="row">';
              echo '<td name="id"><center>'.$registro["id"].'</center></td>';
              echo '<td name="mac"><center>'.$registro["mac"].'</center></td>';
              echo '<td><center><input type="checkbox" name="status" value="$teste"><br></center></td>';
              echo '<td id="linha_desc"><textarea name="desc" type=text placeholder="'.$registro["descricao"].'" /></textarea></td>';
              echo '<td><input name="altura" type=text style="width: 70px;" placeholder="'.$registro["altura_latao"].' cm" /></td>';
              echo '<td><input name="area" type=text style="width: 70px;" placeholder="'.$registro["area_latao"].' cm" /></td>';
              
              echo '<td><form method="get" action="salva.php"><center><button class="voltar" type="submit">Salvar</button></center></form><br />';
              echo '</tr>';
              }
          echo '</tbody></table></form>';
          
          ?></center><br />
          
              <div>            
                  <form method="get" action="index.html">        
                  <center><button class="voltar" type="submit">Voltar</button></center></form>
              </div>
                      
                      <br />
                      <footer class="borda_texto"><center>
                      <img src="img/rodape_logo.png">
                          2019 © <b>DITEC - Smart Solutions</b> - Todos os Direitos Reservados.
                      <a class="px-4" href="https://www.ditecsc.com.br" target="_blank">Ditec - Smart Solution</a>
                      </center></footer>
      </body>
      </html>
       
      salva.php
       
      <?php
      include('conexao.php');
      include_once('altera.php');
       
      // declaração de variáveis
      $id = 22;
      /*$id = $_GET['id'];
      $status = $_POST['status'];*/
      $descricao = $_POST['desc'];
      $altura = $_POST['altura'];
      $area = $_POST['area'];
       
      $up = mysqli_query($conn, "UPDATE interface SET descricao='$descricao', altura_latao='$altura', area_latao='$area' WHERE id=$id"); 
       
      if(mysqli_affected_rows($conn) > 0){
        echo '<center><h1><b>Sucesso</b></h1><br /> <h2>Atualizado!</h2></center>';
        header("Refresh: 2;url=equipamentos.php");
      }else{
          echo '<center><h1><b>Erro</b></h1><br /> <h2>Não foi atualizado!</h2></center>';
        header("Refresh: 2;url=altera.php");
      }
       
      mysqli_close($conn);
      ?>
       
      Do jeito que esta eu consigo alterar o id=22, mas não consegui pegar o id da linha sequente;
       
       
    • Por LuanMartinsTI
      Eu gostaria de saber se existe algum problema relacionado a seguranca criando uma funcao assim, no exemplo sempre que eu crio uma funcao pre reutilizar os dados sao passados direto na chamada da funcao dentro do php, o usuario nao insere nenhum dado, quando o usuario vai inserir dados eu nao trabalho dessa forma, entao minha duvida [e, se mesmo o parametro da funcao sendo informado dentro do php no codigo pode existir algum problema.
      public function contar_cadastro($tabela, $sql){ try { if($sql == null){ $this->Select = $this->Conn->prepare("SELECT * FROM $tabela"); $this->Select->execute(); return $this->Select->rowCount(); }else{ $this->Select = $this->Conn->prepare("SELECT * FROM $tabela". " " ." $sql"); $this->Select->execute(); return $this->Select->rowCount(); } } catch (PDOException $exc) { exibeMensagens($Msg, $ErrNo); } } E as chamadas das funcoes assim
       
      $cmsPDO = new CmsPDO(); $r_userStaff = $cmsPDO->contar_cadastro('usuarios', ' where cargo > 2'); $r_userVip = $cmsPDO->contar_cadastro('usuarios', ' where cargo = 2'); $r_userBan = $cmsPDO->contar_cadastro('usuarios', " where ban = '1'"); $r_usuarioPDO = $cmsPDO->contar_cadastro('usuarios', null); $r_servVip = $cmsPDO->contar_cadastro('servidores', " where vipfree = 'V'"); $r_servFree = $cmsPDO->contar_cadastro('servidores', " where vipfree = 'F'"); $r_servInat = $cmsPDO->contar_cadastro('servidores', " where verificado = '1'"); $r_servOff = $cmsPDO->contar_cadastro('servidores', " where estado = 'Off'"); $r_servOn = $cmsPDO->contar_cadastro('servidores', " where estado = 'On'"); $r_servidores = $cmsPDO->contar_cadastro('servidores', null); Eu normalmente crio as funcoes assim:
      public function cadastrar_usuario($usuario){ try { if($this->veriricarnick($usuario) == false){ if($this->verificiarEmail($usuario) == false){ $query = 'INSERT INTO usuarios ' . '(id, nome, senha, email, cargo, ip)' . 'value(null,:nome, :senha, :email, :cargo, :ip)'; $this->Criar = $this->Conn->prepare($query); $this->Criar->bindValue(':nome' , $usuario->getNome() , PDO::PARAM_STR); $this->Criar->bindValue(':senha' , $usuario->getSenha(), PDO::PARAM_STR); $this->Criar->bindValue(':email' , $usuario->getEmail(), PDO::PARAM_STR); $this->Criar->bindValue(':cargo' , $usuario->getCargo(), PDO::PARAM_INT); $this->Criar->bindValue(':ip' , $usuario->getIp() , PDO::PARAM_STR); $this->Criar->execute(); if($this->Criar->rowCount() == 1){ return 1; }else{ return false; } }else{ return false; } }else{ return false; } } catch (PDOException $exc) { exibeMensagens("<b> Erro ao inserir.</b> Mensagem:{$exc->getMessage()} Código: {$exc->getCode()}", WS_ERROR); } }  
    • Por nosredna
      Olá amigos,
       
      tenho o seguinte código:
      <html> <script type="text/javascript"> function Soma(){ var soma = 0; var ipts = document.querySelectorAll('input[oninput="Soma()"]'); for(var x=0; x<ipts.length; x++){ var valorItem = parseFloat(ipts[x].value); !isNaN(valorItem) ? soma += parseFloat(valorItem) : null; } document.querySelector('#final').value = soma.toFixed(2); } </script> <form action=""> Total produto1: <input type="text" oninput="Soma()" value="0"><br> Total produto2: <input type="text" oninput="Soma()" value="0"><br> <br> Total todos os produtos12: <input type="text" id="final"> </form> </html> Bom...para essas duas inputs funciona corretamente.
      Porém, se eu quiser colocar mais inputs como: Total produto3 + Total produto4 = Total todos os produtos34, Total produtoX + Total produtoY = Total todos os produtosXY, ...
      e usar o mesmo código JS, é possível? alguém poderia me dar uma dica de como eu faço para fazer isso? já tentei de várias maneiras, mas não estou tendo sucesso...
       
      Fico agradecido. 
×

Informação importante

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