Сценарий 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

Для вашего примера, функции .wrapInner () и .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 вокруг содержимого каждого элемента в наборе соответствующих элементов.

Обратите внимание, что в этом примере кода все anchros в вашей разметке будут сопоставлены. Вы можете захотеть быть более конкретным, используя 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);
    }
});