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

发布于 2024-09-06 05:00:31 字数 610 浏览 5 评论 0原文

我有一组类似的锚点

<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 样式。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

离不开的别离 2024-09-13 05:00:31

对于您的示例， .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 更具体

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

回复收藏 0 原文

聽兲甴掵 2024-09-13 05:00:31

这应该可以做到 - 设置一个内部，并复制 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);
    }
});

This should do it - sets an inner <span>, and copies over whatever css attributes are specified in 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);
    }
});

回复收藏 0 原文

~没有更多了~