4

我的 HTML 看起来像这样：

<div id="control">
    <a href="/xx/x">y</a>
    <ul>
        <li><a href="/C003Q/x" class="dw">x</a></li>
        <li><a href="/C003R/xx" class="dw">xx</a></li>
        <li><a href="/C003S/xxx" class="dw">xxx</a></li>
    </ul>
</div>

有没有一种使用 jQuery 的方法，我可以轻松地将这个 HTML 更改为下面的 HTML，其中每个链接都有包含在 a 中的文本，并且每个链接都<span>更改 href为data-href？

<div id="control">
    <a data-href="/xx/x" ><span>y</span></a>
    <ul>
        <li><a data-href="/C003Q/x" class="dw"><span>x</span></a></li>
        <li><a data-href="/C003R/xx" class="dw"><span>xx</span></a></li>
        <li><a data-href="/C003S/xxx" class="dw"><span>xxx</span></a></li>
    </ul>
</div>
4

5 回答 5

3

尝试这个：

$("#control a").each(function() {
    var $el = $(this);
    $el.html("<span>" + $el.text() + "</span>")
        .data('href', $el.attr('href'))
        .removeAttr('href');
});

示例小提琴

于 2012-12-20T09:11:37.780 回答
2

您可以使用 each() 来遍历a具有class dw.

现场演示

$('#control a.dw').each(function(){  
    $(this).html("<span>" + $(this).text() + "</span>" );
});

如果您想对具有类似 href 的元素执行相同操作，/x则需要更改选择器。

$('#control a[href*="/x"]').each(function(){  
    $(this).html("<span>" + $(this).text() + "</span>" )
     .attr('data-href', $(this).attr('href'))
     .removeAttr('href');;
});
于 2012-12-20T09:10:56.633 回答
1

你可以使用wrapInner和data方法。

$('#control a').each(function(){
    $(this).data('href', this.href).wrapInner('<span></span')
    // $(this).attr('data-href', this.href)
    //                       .removeAttr('href') // not a good idea
    //                       .wrapInner('<span></span>')
})

http://jsfiddle.net/Ck6zh/

于 2012-12-20T09:13:51.280 回答
0

您可以像这样将 href 标签更改为 data-href 标签

var foo=$("#control").html();
foo=foo.replace(/href/g,"data-href");
$("#control").html(foo);

看到这个小提琴

于 2012-12-20T09:19:13.443 回答
0

您可以试试这个，将每个 href 属性更改为 data-href ，然后添加 span 标签：

$("#control").find('a').each(function() {
    $(this).attr('data-href',$(this).attr('href'));
    $(this).removeAttr('href');
    $(this).html("<span>" + $(this).text() + "</span>" );
});​​​​​​​​
于 2012-12-20T09:25:45.040 回答