Question

I have a generated HTML menu that looks like this :

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

And I need it to look like this :

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

I tried to manipulate the DOM but I’m a jQuery beginner and, so far, all I succeed in getting was this result :

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

Here’s my jQuery code :

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

I think I can get something working using “each” but for some reason, I couldn’t achieve it yet.
I’ve been looking at a whole lot of boards and tutorials, but couldn’t find any answer to my question.

Thank you for helping me out !

Answer 1

Demo: http://jsfiddle.net/RJzq7/

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