Question

I have a set of anchors like

<a class="lb" href="#">text</a>
<a class="lb" href="#" style="width:200px">text</a>
<a class="lb" href="#" style="color: reen; width:200px">text</a>

that needs to be transformed to the following:

<a class="lb" href="#"><span>text</span></a>
<a class="lb" href="#"><span style="width:200px">text</span></a>
<a class="lb" href="#" style="color:green"><span style="width:200px">text</span></a>

I have no problem creating child span but don’t know how to move parent’s width styling.

Answer 1

For your example, the .wrapInner() and .css() functions should do it. Example:

$(document).ready(function(){
   var $anchors = $('a');
   $anchors.wrapInner('<span></span>');

   $anchors.children('span').each(function(i,v){
      $(this).css('width', $(this).parent().css('width'));
   });
});

Description: Wrap an HTML structure around the content of each element in the set of matched elements.

Note that in this example code, all anchros within your markup will be matched. You might want to be more specific by using classes or ids