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

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