Question

关于内部li元素的样式，我看到this answer，但我关注的是：

  <ul>
    <li>
      content
      <ul>
        <li> more content <li>
      </ul>
    </li>
   </ul>

哪个可能有极深的嵌套看起来很糟糕的样式，也就是说如果我尝试设置像li之类的最外面的border: 1px, solid, #333; sith那个框将包围嵌套的所有内容李而不仅仅是“内容”。

现在你可能会想“添加一个内部div来包装你的内容，我不确定如何用这样的东西做到这一点：

  renderComments: function(comments) {
      // Return undefined if there are no comments to process;
     // alternatively, it /may/ be appropriate to return an empty UL.
     if (!comments || !comments.length) {
         return;
     }

     // Create the container UL for the comments in this level.
     var list = $('<ul>');
     for (var i = 0; i < comments.length; i++) { // Don't use for..in for arrays
         var comment = comments[i];

         // Create an LI for each comment and add it to the container
         var item = $('<li>')
             .attr('id', "comment-" + comment.id);
         // Add the LI to the UL parent
         list.append(item);
         // Add appropriate items to LI for comment
         item.append($('<div>'));
         item.append($('<h1>').text(comment.author));
         item.append($('<p>').text(comment.comment));

         // And then do the same for each child level of comments..
         var childrenList = this.renderComments(comment.children);
         if (childrenList) {
             // ..adding children (UL) container to the current item (LI)
             item.append(childrenList);
         }
     }

     // Return container to be used by caller
     return list;
  },

这实际上创建了我的嵌套列表，可以持续（理论上）

Answer 1

问题是您依次append li元素，而不是将您的评论构建为树，然后将该结构附加到li。尝试这样的事情：

var item = $('<li>').attr('id', "comment-" + comment.id);
var comment = $('<div>');
var author = $('<h1>').text(comment.author);
var commentText = $('<p>').text(comment.comment);

comment.append(author);
comment.append(commentText);
item.append(comment);
list.append(item);

这样做的另一个好处是可以通过命名您正在创建的每个DOM节点来使代码更具可读性。

请务必查看append和appendTo的jQuery文档，看看其他人是否更适合您的用例。

样式嵌套的li元素

1 个答案: