[英]How do I wrap text nested in an anchor tag, within a span?
我有以下標記:
<div class="print">
<p><a href="/">Printable Format</a></p>
</div>
但是,我想將“可打印格式”包裝在內:
<div class="print">
<p><a href="/"><span>Printable Format</span></a></p>
</div>
我看了幾個例子,但是它們似乎並沒有實現我想要的。
先感謝您!
//
$('.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>';
如果要執行多個元素,則必須遍歷數組
$('.print a').html(function(i, h){
return '<span>' + h + '</span>';
});
假設您要使用jQuery執行此操作:
var $span = $( "<span></span>" ), // Create element
$link = $( '.print > p > a' );
$span.text( $link.text() );
$link.html( $span );
$('.print a').wrapInner('<span/>');
將產生:
<a href="/"><span>Printable Format</span></a>
這是jQuery參考: http : //api.jquery.com/wrapInner/
這是我的小提琴: http : //jsfiddle.net/tracyfu/bHVtg/
使用純Javascript,您可以嘗試
var elem = document.getElementsByClassName('print')[0]
.getElementsByTagName('a')[0] ;
var html = elem.innerHTML;
elem.innerHTML = '<span class="red">'+ html + '</span>' ;
將break-word屬性設置為span。
HTML示例:
<span class="wrapped-link"><a href="#">my link</a>
CSS示例
.wrapped-link{
word-break: break-word;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.