1

Tenho meus elementos em um texto.

<h2> Titulo </h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
<h2> OUTRO TITULO </h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
<h2> OUTRO TITULO </h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 

e eu gostaria de marcar os elementos h2 em memória, sei lá, para depois eu criar um sumário com eles, usando <li> e counter no CSS.

Como eu poderia fazer isso?

2
  • Uma forma de se fazer isso envolve usar jQuery. Uma resposta com jQuery seria aceitável no seu caso? Commented 6/03/2014 às 15:02
  • Posso ter entendido mal, mas porque não dás uma classe de CSS aos teus elementos, tipo: <h2 class="sumario">texto</h2> ? Assim ficam marcados e podes aceder aos mesmos através da classe .sumario.
    – Zuul
    Commented 6/03/2014 às 16:51

3 Respostas 3

1

Um exemplo, sem JQuery, em que os elementos H2 são armazenados num array, quando pressionados, e apresentados numa lista quando o botão é pressionado.

JSFiddle

var headers = document.getElementsByTagName('h2');
for (var i = 0; i < headers.length; i++) {
    headers[i].onclick = armazena;
}

var titulos = [];

function armazena() {
    titulos.push(this);
}

function mostra() {
    var lista = document.getElementById('lista');
    lista.innerHTML = '';
    for (var i = 0; i < titulos.length; i++) {
        var el = document.createElement('li');
        el.innerHTML = titulos[i].innerHTML;
        lista.appendChild(el);
    }
}
1
  • era bem isso que eu queria :D
    – Rod
    Commented 10/03/2014 às 12:06
1

Você não precisa marcar os títulos.

Basta montar sua lista em um script. Segue código testado:

var headings = Sizzle('h2');

for( var i = 0; i < headings.length; i++ ) {
    document.write('<ul>');
    document.write('<li>' + headings[i].innerHTML + '</li>');
    document.write('</ul>');
}

O código procura todas as tags 'h2' do seu código. Dê uma olhada no link abaixo:

JSFIDDLE

4
  • 1
    Nem precisa do Sizzle, pode usar document.querySelectorAll
    – bfavaretto
    Commented 6/03/2014 às 15:22
  • 2
    Ou document.getElementsByTagName, caso preze pela compatibilidade. Commented 6/03/2014 às 15:55
  • Acho que me expressei mal, eu gostaria que ao clicar em cima do H2 onClick, ele armazene na memória, para se eu tiver um botão, ele gerar o sumário pra mim...
    – Rod
    Commented 6/03/2014 às 17:25
  • A ideia seria, ter N(vários) h2, e apenas os que eu selecionar guardar em memória para depois gerar uma lista com conteudo dos mesmos
    – Rod
    Commented 6/03/2014 às 17:26
0

Se quiser armazenar num array pra trabalhar com eles dinamicamente, pode usar isso:

jQuery(document).ready(function(){
    var data = [];
    $('h2').each(function(){
        data.push($(this));
    })
});

JSFiddle

2
  • No exemplo postado, percebi que os títulos só aparecem quando você chama a DIV com o id = Lista. Não acho que seja o objetivo da pergunta. Commented 6/03/2014 às 15:16
  • É só um exemplo pra mostrar que o JS armazenou os <h2> e como ele pode utilizá-los, umas vez que estão na memória do js.
    – mend3
    Commented 6/03/2014 às 15:17

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 .