[英]convert <a> text string to dom element with jQuery
How can I convert the text in a link to an html element? 如何将链接中的文本转换为html元素?
I'm targetting the text with $('a').text();
我用
which returns the value but I can't add the element to it. $('a').text();
它返回值,但我无法将元素添加到其中。
I've tried this: 我已经试过了:
var someText = $('a').text();
var theElement = $('< p >' + someText + '< /p >');
someText.replaceWith(theElement);
I know this supposedly would add a text element inside the link which is not the best practice but not even this works. 我知道这可能会在链接内添加一个文本元素,这不是最佳实践,但甚至行不通。
what I really need is to remove the whole text and rewrite it immediately after de link as a text element. 我真正需要的是删除整个文本,并在将de link作为文本元素后立即将其重写。
any help is appreciated. 任何帮助表示赞赏。 thank you
谢谢
markup: 标记:
<li>
<a href="/"> <img src="image.png"> text to be converted to element </a>
</li>
what I want: 我想要的是:
<li>
<a href="/"> <img src="image.png"></a>
<p> text to be converted to element </p>
</li>
Since someText
is a string, not a jQuery element, you can't call .replaceWith()
on it. 由于
someText
是字符串,而不是jQuery元素,因此无法在其上调用.replaceWith()
。 Try something like this: 尝试这样的事情:
var someLink = $('a');
var someText = someLink.text();
var theElement = $('<p>' + someText + '</p>'); // no spaces inside tags
someLink.replaceWith(theElement);
http://jsfiddle.net/0xxrL6zy/ http://jsfiddle.net/0xxrL6zy/
UPDATE Since you added new information to your question, here's a solution to meet your needs: 更新由于您在问题中添加了新信息,因此可以满足您的需求:
var someLink = $('a');
var someText = someLink.text();
var someImg = someLink.find('img');
var theElement = $('<p>' + someText + '</p>');
someLink.html(someImg).after(theElement);
http://jsfiddle.net/mblase75/mzbtr0qp/1/ http://jsfiddle.net/mblase75/mzbtr0qp/1/
http://jsfiddle.net/cvgbqb8b/2/ http://jsfiddle.net/cvgbqb8b/2/
var anchor = $('li a');
anchor.after('<p>' + anchor.text() + '</p>')
.contents()
.filter(function(){
return (this.nodeType == 3);
})
.remove();
Found the code for removing the text afterward here https://stackoverflow.com/a/17852238/1415091 在此处找到用于删除文本的代码https://stackoverflow.com/a/17852238/1415091
I'd suggest: 我建议:
// iterate over each of the <a> elements within <li> elements:
$('li a').each(function() {
// create a <p> element, setting its text
// to that of the 'this' element (the <a>):
$('<p>', {
'text': this.textContent
// insert that created <p> after the current <a> element:
}).insertAfter(this);
// filtering the childNodes of the current <a>:
$(this).contents().filter(function() {
// keeping only those that are of nodeType === 3
// and therefore are textNodes:
return this.nodeType === 3;
// removing those nodes:
}).remove();
});
$('li a').each(function() { $('<p>', { 'text': this.textContent }).insertAfter(this); $(this).contents().filter(function() { return this.nodeType === 3; }).remove(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <a href="/"> <img src="http://lorempixel.com/300/300/people" />text to be converted to element</a> </li> </ul>
References: 参考文献:
contents()
. contents()
。 each()
. each()
。 filter()
. filter()
。 wrap()
. wrap()
。 Use .html()
使用
.html()
var someText = 'Hey!';
$('#test').html('<p>' + someText + '</p>');
Fiddle: http://jsfiddle.net/howderek/3t3Lw75x/ 小提琴: http : //jsfiddle.net/howderek/3t3Lw75x/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.