Javascript jQuery—将列表项的一个元素移动到同一项的另一个元素中+;对我列表中的每一项都这样做

Javascript jQuery—将列表项的一个元素移动到同一项的另一个元素中+;对我列表中的每一项都这样做,javascript,jquery,html,list,move,Javascript,Jquery,Html,List,Move,我有一个生成的HTML菜单,如下所示: <ul class="principal-nav"> <li><a href="#">Item 01</a> <span class="posts-amount">(12)</span></li> <li><a href="#">Item 02</a> <span class="posts-amount">

我有一个生成的HTML菜单,如下所示:

<ul class="principal-nav">
     <li><a href="#">Item 01</a> <span class="posts-amount">(12)</span></li>
     <li><a href="#">Item 02</a> <span class="posts-amount">(7)</span></li>
     <li><a href="#">Item 03</a> <span class="posts-amount">(25)</span></li>
</ul>
<ul class="principal-nav">
     <li><a href="#">Item 01 <span class="posts-amount">(12)</span></a></li>
     <li><a href="#">Item 02 <span class="posts-amount">(7)</span></a></li>
     <li><a href="#">Item 03 <span class="posts-amount">(25)</span></a></li>
</ul>
我想我可以用“每个”来做一些事情,但由于某种原因,我还没能做到。 我看了很多图板和教程,但都找不到我问题的答案

谢谢你帮助我

演示:

演示:


克隆将创建元素的重复副本。所以改用appendTo()。

克隆将创建元素的重复副本。所以改用appendTo()。

这是一个概念错误。如果您需要用jQuery解决一个设计问题,那么您肯定可以在之前解决它。为什么不能正确生成HTML。如果您在设计时修复它,以后就不需要使用jQuery了。我完全同意您的看法。问题是我一直在使用旧版本的Wordpress。我不想编辑主题目录之外的文件。我试图创建一个新的菜单(有一个很好的功能),但它毁了我的博客。我现在没有时间从头开始重新做这个博客,因为它只是一个附带项目。这就是我选择jQuery方式的原因。但同样,你完全正确:有一种更好、更干净的方法可以做到这一点;)有时候,最好的方法不是效率更高,也不是速度更快。我理解你。这是一个概念错误。如果您需要用jQuery解决一个设计问题,那么您肯定可以在之前解决它。为什么不能正确生成HTML。如果您在设计时修复它,以后就不需要使用jQuery了。我完全同意您的看法。问题是我一直在使用旧版本的Wordpress。我不想编辑主题目录之外的文件。我试图创建一个新的菜单(有一个很好的功能),但它毁了我的博客。我现在没有时间从头开始重新做这个博客,因为它只是一个附带项目。这就是我选择jQuery方式的原因。但同样,你完全正确:有一种更好、更干净的方法可以做到这一点;)有时候,最好的方法不是效率更高,也不是速度更快。我明白你的意思。我已经接受了你的答案,但董事会要求等待6分钟,以确认答案。我对你的代码很在行。完全符合我的需要。非常感谢你!我已经接受了你的回答,但董事会要求等待6分钟,以便对其进行验证。我对你的代码很在行。完全符合我的需要。非常感谢你!
<ul class="principal-nav">
     <li><a href="#">Item 01 <span class="posts-amount">(12)</span> <span class="posts-amount">(7)</span> <span class="posts-amount">(25)</span></a></li>
     <li><a href="#">Item 02 <span class="posts-amount">(12)</span> <span class="posts-amount">(7)</span> <span class="posts-amount">(25)</span></a></li>
     <li><a href="#">Item 03 <span class="posts-amount">(12)</span> <span class="posts-amount">(7)</span> <span class="posts-amount">(25)</span></a></li>
</ul>
$('.principal-nav li a').append(
     $('span.posts-amount').clone().end()
);
$('.principal-nav li a').each(function () {
  $(this).next().appendTo(this);
});