user1849368
user1849368

Reputation: 35

wrap() in jquery

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 ...:)

Upvotes: 1

Views: 103

Answers (3)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382514

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.

Upvotes: 2

Adil
Adil

Reputation: 148178

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>');

Upvotes: 3

David M&#252;ller
David M&#252;ller

Reputation: 5351

Take wrapInner, like so:

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

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

Why the .test()?

Upvotes: 4

Related Questions