Question

我有一个博客主题，为其博客索引页面生成以下输出。对于每个帖子（每页10个），它还会迭代相关的评论列表（每个帖子n个）。在每个评论中，在div.commentcontent之前有一个h4元素。

<ul id="postlist">
    <li class="post">
        <h2>Post Title</h2>
        <p>Here is some post content</p>
        <ul class="commentlist">
            <li class="comment">
                <h4>Comment Author Name <span class="meta">Date</span></h4>
                <div class="commentcontent">Here is the comment text</div>
            </li>
        </ul>
    </li>
</ul>

在页面加载时，我需要在每个注释中重新定位h4，使其跟随div。

我已经阅读了detach和appendTo，我尝试使用这个片段迭代每个帖子，然后在帖子中反复每个评论，但这不起作用。

$('#postlist li').each(function() {
    $('.comment').each(function() {
        var commentMeta = $('.comment').children('h4').detach();
        commentMeta.appendTo('.comment').children('.commentcontent');
    });
});

额外：我还有AJAX处理评论发布，所以当发布新评论时，他们也需要重新定位h4，即使页面没有刷新。

额外2：是否可以在评论作者姓名周围包裹span标签？

非常感谢任何帮助。感谢。

Answer 1

$('#postlist li').each(function() {
$('.comment').each(function() {
    var commentMeta = $(this).children('h4').detach();
    commentMeta.appendTo($(this))
});
});

DEMO

编辑： - 对于ajax评论发布，您可以创建一个函数并在成功/完成ajax方法时调用该函数

function swap()
{
   $('#postlist li').each(function() {

   $('.comment').each(function() {

      if($(this).children(':first-child').prop('tagName')=="H4")
      {  
        var commentMeta = $(this).children('h4').detach();
        commentMeta.appendTo($(this))
      }
  });

  });
}

$.ajax(
{
  url: //,
  data: //,
  success: function()
  {
    swap();
  }
})

如何迭代嵌套的UL以将h4从div上方移动到下方？

1 个答案: