Question

我有一个生成的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>

我试图操纵DOM，但我是一个jQuery初学者，到目前为止，我成功获得的是这个结果：

<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>

这是我的jQuery代码：

$('.principal-nav li a').append(
     $('span.posts-amount').clone().end()
);

我想我可以使用＆＃34;每个＆＃34;但由于某种原因，我还没有实现它。我一直在查看大量的电路板和教程，但无法找到问题的答案。

感谢您帮助我！

Answer 1

演示：http://jsfiddle.net/RJzq7/

$('.principal-nav li a').each(function () {
  $(this).next().appendTo(this);
});

Answer 2

克隆将创建元素的重复副本。所以请改用appendTo（）。

jQuery - 将列表项的元素移动到同一项的另一个元素内+为我的列表中的每个项执行此操作

2 个答案: