[英]How do I wrap text nested in an anchor tag, within a span?
I have the following markup: 我有以下标记:
<div class="print">
<p><a href="/">Printable Format</a></p>
</div>
However, I want to wrap "Printable Format" within a : 但是,我想将“可打印格式”包装在内:
<div class="print">
<p><a href="/"><span>Printable Format</span></a></p>
</div>
I have looked at several examples, but they don't seem to accomplish what I'm looking for. 我看了几个例子,但是它们似乎并没有实现我想要的。
Thank you in advance! 先感谢您!
Use .contents() with .wrap() 将.contents()与.wrap()一起使用
//
$('.print').find('a').contents().wrap('<span/>')
// same as $('.print a').contents().wrap('<span/>')
or wrapInner() - which does the same thing 或wrapInner() -做同样的事情
$('.print').find('a').wrapInner('<span/>')
// same as $('.print a').wrapInner('<span/>')
Pure JS example for @Alfo @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>';
If you want to do multiple elements, you will have to loop through the arrays 如果要执行多个元素,则必须遍历数组
$('.print a').html(function(i, h){
return '<span>' + h + '</span>';
});
Assuming you want to do this with jQuery: 假设您要使用jQuery执行此操作:
var $span = $( "<span></span>" ), // Create element
$link = $( '.print > p > a' );
$span.text( $link.text() );
$link.html( $span );
$('.print a').wrapInner('<span/>');
Will produce: 将产生:
<a href="/"><span>Printable Format</span></a>
Here is the jQuery reference: http://api.jquery.com/wrapInner/ 这是jQuery参考: http : //api.jquery.com/wrapInner/
Here is my Fiddle: http://jsfiddle.net/tracyfu/bHVtg/ 这是我的小提琴: http : //jsfiddle.net/tracyfu/bHVtg/
With Pure Javascript you can try this 使用纯Javascript,您可以尝试
var elem = document.getElementsByClassName('print')[0]
.getElementsByTagName('a')[0] ;
var html = elem.innerHTML;
elem.innerHTML = '<span class="red">'+ html + '</span>' ;
Set the break-word property to the span. 将break-word属性设置为span。
Example HTML: HTML示例:
<span class="wrapped-link"><a href="#">my link</a>
Example CSS CSS示例
.wrapped-link{
word-break: break-word;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.