gerar lista de links âncoras dinamicamente

[Marcosvn 3]

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

[Omar~ 87]

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

[Marcosvn 3]

 

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:

 

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

[Omar~ 87]

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.

[Marcosvn 3]

pode crê manu, puxar o array do banco de dados é mais prático. Vlww , abraço