jquery - スパン内で、アンカー タグにネストされたテキストをラップするにはどうすればよいですか?

Question

次のマークアップがあります。

<div class="print">
  <p><a href="/">Printable Format</a></p>
</div>

ただし、「印刷可能な形式」を次のようにラップしたい：

<div class="print">
  <p><a href="/"><span>Printable Format</span></a></p>
</div>

いくつかの例を見てきましたが、探しているものを達成していないようです。

前もって感謝します！

• B

Answer 1

.wrap( )で.contents()を使用する

// 
$('.print').find('a').contents().wrap('<span/>')
// same as $('.print a').contents().wrap('<span/>')

またはwrapInner() - 同じことを行います

$('.print').find('a').wrapInner('<span/>')
// same as $('.print a').wrapInner('<span/>')

@Alfo の純粋な JS の例

// returns an array of elements
var dtag = document.getElementsByClassName('print');
// gets first anchor tag inside first class=print
var atag = dtag[0].getElementsByTagName('a')[0];
// add span tag
atag.innerHTML = '<span>' + atag.innerHTML+ '</span>';

複数の要素を実行したい場合は、配列をループする必要があります

http://jsfiddle.net/KkAkk/

Answer 2

$('.print a').html(function(i, h){
     return '<span>' + h + '</span>';
});

Answer 3

Pure Javascriptを使用すると、これを試すことができます

var elem = document.getElementsByClassName('print')[0]
                   .getElementsByTagName('a')[0] ;

var html = elem.innerHTML;

elem.innerHTML = '<span class="red">'+ html + '</span>' ;

ワーキングフィドル </p>

Answer 4

break-word プロパティをスパンに設定します。

HTML の例:

<span class="wrapped-link"><a href="#">my link</a>

CSS の例

.wrapped-link{
    word-break: break-word;
}

Answer 5

$('.print a').wrapInner('<span/>');​​​​​​​​​​​​

生産します:

<a href="/"><span>Printable Format</span></a>

jQuery リファレンスは次のとおりです: http://api.jquery.com/wrapInner/

これが私のフィドルです：http://jsfiddle.net/tracyfu/bHVtg/

Answer 6

jQuery でこれを行いたいと仮定します。

var $span = $( "<span></span>" ), // Create element
    $link = $( '.print > p > a' );

$span.text( $link.text() );
$link.html( $span );