Can I use jQuery to change the content of links on a page?

Question

My HTML looks like this:

<div id="control"> <a href="/xx/x">y</a> <ul> <li><a href="/C003Q/x" class="dw">x</a></li> <li><a href="/C003R/xx" class="dw">xx</a></li> <li><a href="/C003S/xxx" class="dw">xxx</a></li> </ul> </div> 

Is there a way to use jQuery that I can easily change this HTML to look like the HTML below, where each link has text that is enclosed in a <span> , and where each href changes to data-href ?

 <div id="control"> <a data-href="/xx/x" ><span>y</span></a> <ul> <li><a data-href="/C003Q/x" class="dw"><span>x</span></a></li> <li><a data-href="/C003R/xx" class="dw"><span>xx</span></a></li> <li><a data-href="/C003S/xxx" class="dw"><span>xxx</span></a></li> </ul> </div> 

Answer 1

Try the following:

 $("#control a").each(function() { var $el = $(this); $el.html("<span>" + $el.text() + "</span>") .data('href', $el.attr('href')) .removeAttr('href'); }); 

Script example

Answer 2

You can use each () to repeat elements of type a that have class dw .

Live demo

 $('#control a.dw').each(function(){ $(this).html("<span>" + $(this).text() + "</span>" ); }); 

If you want to do the same for elements having href like /x , you need to change the selector.

 $('#control a[href*="/x"]').each(function(){ $(this).html("<span>" + $(this).text() + "</span>" ) .attr('data-href', $(this).attr('href')) .removeAttr('href');; }); 

Answer 3

You can use the wrapInner and data methods.

 $('#control a').each(function(){ $(this).data('href', this.href).wrapInner('<span></span') // $(this).attr('data-href', this.href) // .removeAttr('href') // not a good idea // .wrapInner('<span></span>') }) 

http://jsfiddle.net/Ck6zh/

Answer 4

You can change the href tag to data-href tag like this

 var foo=$("#control").html(); foo=foo.replace(/href/g,"data-href"); $("#control").html(foo); 

See this script

Answer 5

You can try this, change each href attribute to data-href, and then add the span tag:

 $("#control").find('a').each(function() { $(this).attr('data-href',$(this).attr('href')); $(this).removeAttr('href'); $(this).html("<span>" + $(this).text() + "</span>" ); });​​​​​​​​