JQuery скрипт, чтобы переместить атрибут соответствующих элементов для их детей

Question

У меня есть набор якорей как

<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> 

, который должен быть преобразован к следующему:

<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> 

У меня нет проблемы при создании ребенок span, но не знаю, как переместить родительский стиль width.

Answer 1

Для вашего примера это должны делать функции и .css(). Пример:

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

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

Описание: обернуть вокруг HTML-структура содержания каждого элемента в наборе соответствующих элементов.

Обратите внимание, что в этом примере кода все привязки в вашей разметке будут сопоставлены. Вы можете быть более конкретным, используя classes или ids

Answer 2

Это должно сделать это - устанавливает внутренний <span> и копии над любой атрибуты CSS указаны в to_be_moved:

$('.lb').each(function(){ 
    $(this).wrapInner('<span/>'); 
    var to_be_moved = ['width']; // array of css attributes to move 
    for (var i=0;i<to_be_moved.length;i++){ 
     // get current value 
     var currentValue = $(this).css(to_be_moved[i]); 
     // set current value to nothing 
     $(this).css(to_be_moved[i], ''); 
     // place the value into the child span 
     $(this).children('span').css(to_be_moved[i], currentValue); 
    } 
});