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のように簡単に変更できる方法はありますか？すべてのリンクにで囲まれたテキストが<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

aeach（）を使用して、。を持つタイプの要素を反復処理できます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 に答える