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

Posted 2023-02-16

【中文标题】如何遍历嵌套的 UL 以将 h4 从 div 上方移动到 div 下方？

【英文标题】：How do I iterate over a nested UL to move an h4 from above a div to below it?

【发布时间】：2013-11-23 13:56:22

【问题描述】：

我有一个博客主题，它为其博客索引页面生成以下输出。对于每个帖子（每页 10 个），它还会遍历相关的 cmets 列表（每个帖子 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 并且我尝试使用这个 sn-p 来遍历每个帖子，然后遍历帖子中的每个评论，但这不起作用。

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

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

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

任何帮助将不胜感激。谢谢。

【参考方案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();
  
)

【讨论】：

做到了 :) 谢谢。如果你有任何额外的答案，让我知道。干杯。

@Suzanne - 这不符合您在问题中所要求的，它将 H4 附加到 .commentcontent 元素中，并且您明确要求 H4 “跟随 DIV” ，不在里面吗？

@Suzanne 哎呀在编辑时忘记了这一点。将appendTo($(this).children('.commentcontent')) 更改为appendTo($(this))

@adeneo 你是对的。但是，只要它遵循内容并在被注入的评论表单之前登陆，它就可以正常工作。