在树中显示元素

Question

我有一些如下所示的div：

<div id="header1-1" class="header1>header1</div>
<div id="header2-1" class="header2>header2</div>
<div id="header1-2" class="header1>header1</div>
<p>text</p>
<div id="header2-2" class="header2>header2</div>
<div id="header3-1" class="header3>header3</div>

我想要显示一棵树：

header1
  header 2
header1
    header2
         header3

我遇到了很大麻烦：

$( ".header"+i ).each(function() {
        $('.fr-placeholder').remove();
        var txt = $(this).text();
        $(this).attr('id', 'header'+i+'-'+j);

        j++;
        headers.push(j);

        if(txt.length != 0){
            var divId = $(this).attr('id');
            $('#outline').append('<li><a data-id="'+divId+'" >'+txt+'</a></li>' );
        }

    });

    for (var k = 1; k < headers.length; k++) {

        var l = k + 1;
        var siblings = $('#header'+i+'-'+k).nextUntil('#header'+i+'-'+l);

    }

我试图找到2个div之间的所有元素并填充我的树，但这是错误的，因为在标题2和标题2之间是标题1而标题1是suposused为parent。此外，我有其他dom元素，如文本，我想tod isplay只有标题。是否有人以另一种方式暗示我？