如何使用jQuery創建無序列表

Question

我有一個javascript對象如下

var course = { 
    chapter: "chapter 1",
    chapter: "chapter 2",
    lesson: "lesson 1",
    lesson: "lesson 2",
    lesson: "lesson 3",
    chapter: "chapter 3",
    lesson: "lesson 1",
    page: "page 1",
    page: "page 2",
    page: "page 3",
    lesson: "lesson 2",
}

現在，我想生成我的無序列表，如下所示：

<ul>
    <li>chapter 1</li>
    <li>chapter 2</li>
    <ul>
        <li>lesson 1</li>
        <li>lesson 2</li>
        <li>lesson 3</li>
    </ul>
    <li>chapter 3</li>
        <ul>
            <li>lesson 1</li>
            <ul>
                <li>page 1</li>
                <li>page 2</li>
                <li>page 3</li>
            </ul>
            <li>lesson 2</li>
        </ul>
</ul>

如何使用jQuery或JavaScript實現這一目標。 任何幫助深表感謝。

Answer 1

如果你能夠將您的對象數據轉換為內容簡單的數組列表，那么你可以使用jQuery運行條件邏輯塊each循環遍歷數組並確定哪些列表各級各項目應根據它的前身。

這是對邏輯評論的嘗試，我懷疑應該有更優雅的方式來做到這一點。

 var course = [ "chapter 1", "chapter 2", "lesson 1", "lesson 2", "lesson 3", "chapter 3", "lesson 1", "page 1", "page 2", "page 3", "lesson 2", "chapter 4", "chapter 5", "lesson 1", "lesson 2", "lesson 3", "chapter 6", "lesson 1", "page 4", "page 5", "page 6", "lesson 2" ]; // content var paper = $('.course'), oldlesson = false, oldpage = false, // lesson or page flags cases = { 'less': 'lesson', 'chap': 'chapter', 'page': 'page' }; // list scenarios for later assessment function addList(level, newcontent) { paper.find('ul').eq(level).append(newcontent); } // content adding function, targets specific levels of ul $.each(course, function(i) { var typ = this.substring(0, 4), // check the first four letters of the list type content = '<li class="' + cases[typ] + '">' + this + '</li>'; // estanlish the list class and content if (cases[typ] === 'lesson' && !oldlesson && !oldpage) { // is this li a new lesson? paper.append('<ul />'); // add a nested unordered list oldlesson = true; // we are now in lesson nesting state } else if (cases[typ] === 'page' && !oldpage && oldlesson) { addList(-1, '<ul />'); // add a new page level ul oldpage = true; // we are now in paper nesting state } if (cases[typ] === 'lesson' && oldpage && oldlesson) { // lesson after page? addList(-2, content); // append to the penultimate ul oldpage = false; } else if (cases[typ] === 'lesson' && !oldpage && oldlesson) { addList(-1, content); // append to the last lesson ul } if (cases[typ] === 'page' && oldpage) { addList(-1, content); // append to the last page ul } else if (cases[typ] === 'chapter') { // if it's a chapter then reset all levels paper.append(content); // otherwise go about your business adding lists oldlesson = false, oldpage = false; // reset list type flags } }); // cycle through array items 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <ul class='course'> </ul>