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结构。

请注意，在此示例代码中，标记中的所有锚点都将匹配。您可能希望使用classes或ids

更具体

Answer 2

这应该这样做 - 设置内部<span>，并复制to_be_moved中指定的任何css属性：

$('.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);
    }
});

jQuery脚本，用于将匹配元素的属性移动到其子元素

2 个答案: