gerar lista de links âncoras dinamicamente

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

>

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:

/applications/core/interface/imageproxy/imageproxy.php?img=https://i.imgur.com/vkYBvke.png&key=faab2a84e6230bdd4c6229473e7cb12329fc6d3e3eb688db6f85e755e15988e2" />

	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

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.

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