jQuery get text with wildcard contents after an element and move it

Question

Hey,

I think this might be a tricky one, but if anyone can solve it I'd be very impressed, and also very grateful.

Here's the existing markup (which I can't change, otherwise then it'd be an easy problem and I could solve it myself!):

<a title="1 topics" href="http://localhost/tags/amis/"&gt;amis&lt;/a&gt; (1) 
<a title="2 topics" href="http://localhost/tags/amis/"&gt;amis&lt;/a&gt; (2) 
<a title="1 topics" href="http://localhost/tags/amis/"&gt;amis&lt;/a&gt; (1) 
<a title="3 topics" href="http://localhost/tags/amis/"&gt;amis&lt;/a&gt; (3)

What I want to do, is grab the brackets and the value inside ([WILDCARD VALUE HERE]), cut it, and append it inside the < a > tags wrapped in a < span >.

So this is what I'm after:

<a title="1 topics" href="http://localhost/tags/amis/"&gt;amis <span>(1)</span></a>

Again, if anyone has any ideas... Thanks!

Answer 1

Try this

Demo here

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

   var $this = $(this);
   var textEl = this.nextSibling;
   var spanEl = $('<span />').text(textEl.data);
   $this.append( spanEl );
   $(textEl).remove();

});