wrap() in jquery

Question

I am new in jquery and trying to find out way that how to use wrap() in my menues of website following in my code

HTML

<ul>
   <li><a href="#">Who We Are</a></li>
   <li><a href="#">Our Work</a></li>
</ul>

SCRIPT

$('.menu li a').text().wrap('<span></span>');

But its not working :(

I want to look my HTML code like following code i just want to add <span> tag into <a> tag

CODE

<ul>
   <li><a href="#"><span>Who We Are</span></a></li>
   <li><a href="#"><span>Our Work</span></a></li>
</ul>

Please help me friends THANKS in advance ...:)

Answer 1

Wrap would put the span around the a.

You can do this :

$('.menu li a').each(function(){
     $(this).html('<span>'+$(this).html()+'</span>');
});

Demonstration (open the console to see the final HTML)

I suppose you meant text and not test. If so be aware that text doesn't return the text node but just a string, so you can't use it as a jQuery element and you can't call wrap on it.

Answer 2

First of all you do not have test() method that you can call with the elements returned by selector and second you need wrapInner() instead of wrap

Live Demo

Change

$('.menu li a').test().wrap('<span></span>');

To

$('ul li a').wrapInner('<span></span>');

Answer 3

Take wrapInner, like so:

$('li a').wrapInner('<span/>');​

See this fiddle: http://jsfiddle.net/ucj5v/2/

Why the .test()?