鍍金池/ 問答/HTML/ JQUERY如何遍歷多個(gè)標(biāo)簽里的內(nèi)容并按規(guī)律存放在另一個(gè)標(biāo)簽里？

JQUERY如何遍歷多個(gè)標(biāo)簽里的內(nèi)容并按規(guī)律存放在另一個(gè)標(biāo)簽里？

<div class="box">
    <ul>
        <li>
            <div class="content">
                <h1>我是標(biāo)題1</h1>
                <i>我是副標(biāo)題1</i>
            </div>
        </li>
        <li>
            <div class="content">
                <i>我是副標(biāo)題2</i>
            </div>
        </li>
        ...省略N個(gè)副標(biāo)題...
        <!--標(biāo)題1是大標(biāo)題，副標(biāo)題為多個(gè)副標(biāo)題，但都屬于大標(biāo)題1-->
        <li>
            <div class="content">
                <h1>我是標(biāo)題2</h1>
                <i>我是副標(biāo)題1</i>
            </div>
        </li>
        <li>
            <div class="content">
                <i>我是副標(biāo)題2</i>
            </div>
        </li>
        ...省略N個(gè)副標(biāo)題...
        <!--每個(gè)大標(biāo)題（我是標(biāo)題）下包含N個(gè)副標(biāo)題...-->
    </ul>
</div>
<div class="list"></div>
<!--用于存放目錄-->

代碼如上所示，我是標(biāo)題相當(dāng)于卷名，而副標(biāo)題則是這個(gè)卷下的章節(jié)。我要獲取當(dāng)前頁標(biāo)題和副標(biāo)題用來形成目錄，就是那種點(diǎn)擊跳轉(zhuǎn)到指定位置。想要實(shí)現(xiàn)的效果如下：

<div class="list">
    <div class="title">我是標(biāo)題1</div>
    <ul>
        <li>我是副標(biāo)題1</li>
        <li>我是副標(biāo)題2</li>
    </ul>
    <div class="title">我是標(biāo)題2</div>
    <ul>
        <li>我是副標(biāo)題1</li>
        <li>我是副標(biāo)題2</li>
    </ul>
</div>

請問如何用JQUERY實(shí)現(xiàn)呢？謝謝！~

回答
編輯回答
伐木累

先把你那個(gè)結(jié)構(gòu)解析成一個(gè)數(shù)組，然后遍歷這個(gè)數(shù)組生成html

        var arr = [];
        var i = 0;
        $.each($('.content'),function(index,el){    
            if($(el).find('h1')[0]){
                arr.push({
                    title:$(el).find('h1').text(),
                    list:[{title:$(el).find('i').text()}]
                });
                i++;
            }else{
                arr[i-1].list.push({
                    title:$(el).find('i').text(),                    
                })    
            }                 
        })
        console.log(arr);
        var list = '';
        $.each(arr,function(index){
           var title = '<div class="title">'+arr[index].title+'</div>';
           var li = '';
           $.each(arr[index].list,function(index2){
                li += '<li>'+arr[index].list[index2].title+'</li>'
           })
           var ul = '<ul>'+li+'</ul>'
            list += title + ul;
        });
         $(".list").append(list);
2017年3月2日 16:21