Question

我的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，其中每个链接都包含在<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>

Answer 1

试试这个：

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

Example fiddle

Answer 2

您可以使用each（）来迭代具有a class的{{1}}类型的元素。

<强> Live Demo

dw

如果您想对href类似$('#control a.dw').each(function(){ $(this).html("<span>" + $(this).text() + "</span>" ); });的元素执行相同操作，则需要更改选择器。

/x

Answer 3

您可以使用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/

Answer 4

您可以将href标记更改为data-href标记，如此

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

See this fiddle

Answer 5

您可以尝试此操作，将每个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>" );
});

我可以使用jQuery来更改页面上链接的内容吗？

5 个答案: