Question

我正在为一个通过Ajax请求获取评论的网站制作评论系统，并将它们添加到评论列表中。这工作正常，但它总是将它们添加到列表的底部。这是因为我正在使用decimal.Decimal，我现在需要找到替代方案......

有没有办法在我认识的另一个strip下添加list.appendChild(item);元素？

这是包含当前行为的video

及其代码：

<li>

Answer 1

您可以使用Node对象的firstChild和insertBefore方法：

https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild

https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

JQuery也有一个insert after方法：

http://api.jquery.com/insertafter/

获取列表容器的第一个子节点。然后在它之前插入。

Answer 2

你可以这样做。

由于您使用的是jQuery，因此无需使用本机js api，因为您需要更加详细，并且不会拥有jQuery的强大功能来帮助操作DOM。

您可以简单地使用$.fn.after(html)或$.fn.append(html)，具体取决于您需要评论在评论中的位置。

＆＃13;

// mock ajax call that will resolve in under 400ms
$.mockAjax = ({ parent }) => {
  const $promise = $.Deferred()
  
  setTimeout(() => {
    $promise.resolve([
      { id: 11, comment: 'first child comment', parent: 1 },
      { id: 12, comment: 'second child comment', parent: 2 },
      { id: 12, comment: 'second child comment 2', parent: 2 },
      { id: 13, comment: 'click me again', parent: 3 },
      { id: 23, comment: 'third grandchild comment', parent: 13 },
    ].filter(x => x.parent == parent))
  }, Math.random() * 400)
  
  return $promise.promise()
}

// api getter
const getChildComments = parent =>
  $.mockAjax({ parent })

// comments renderer
const renderComments = comments =>
  $('<ul class="comments">')
    .append(comments.map(({ id, parent, comment }) =>
      `<li class="comment" data-comment-id="${id}" data-parent-id="${parent}">
        ${comment}
      </li>`
    ))

// delegate the event
$(document.body).on('click', '.comment', function(e) {
  const $this = $(this)
  // don't allow the event to bubble up through the dom
  e.stopImmediatePropagation()
  // only get content if not already loaded
  if ($this.data('loaded')) {
    $this.toggleClass('hide')
  } else {
    // set the loading state
    $this.addClass('loading')
    getChildComments($this.data('comment-id'))
      // convert the comments to jQuery objects to be added to the DOM
      .then(renderComments)
      // append the comments to the DOM inside the clicked comment
      .then($comments => $this.append($comments))
      // clean up your comment state
      .then(() => 
        $this
          .removeClass('loading')
          .data('loaded', true)
       )
  }
})

＆＃13;

.comment {
  cursor: pointer;
}

.comment.loading  {
  color: red;
}

.comment.hide > .comments {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="comments" id="comments">
  
  <li class="comment" data-comment-id="1">has single child comment</li>
  <li class="comment" data-comment-id="2">has two child comments comments</li>
  <li class="comment" data-comment-id="3">has grandchild comments</li>
  <li class="comment" data-comment-id="4">no child comments</li>

</ul>

＆＃13;

在unorderdlist中而不是在底部插入指定listItem下的项目

2 个答案: