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运行一个条件逻辑块来遍历数组并确定每个项目的列表级别应该基于它的前身。

这是对逻辑评论的尝试，我怀疑应该有一种更优雅的方式来做到这一点。

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用jQuery

1 个答案: