我有以下HTML代码段:
<span class="target">Change me <a class="changeme" href="#">now</a></span>
我想从jQuery更改范围内的文本节点(即“更改我”),同时保留嵌套的<a>
标记,其中包含所有属性等。我最初的抱怨是在span节点上使用.text(...)
,但是因为turns out这将用传递的文本内容替换整个内部部分。
我首先克隆了<a>
标记,然后设置<span>
的新文本内容(将删除原始<a>
标记),最后附加克隆的{{} 1}}标记到我的<a>
。这样可行,但对于像这样的简单任务感觉有点过分。顺便说一句。我不能保证在span中有一个初始文本节点 - 它可能是空的,就像:
<span>
我也做了jsfiddle。那么,这样做的方法是什么呢?
答案 0 :(得分:6)
尝试类似:
$('a.changeme').on('click', function() {
$(this).closest('.target').contents().not(this).eq(0).replaceWith('Do it again ');
});
参考:http://api.jquery.com/contents/
<强>更新强>:
我想我读错了你的问题,你试图替换它已经存在的文本并以其他方式注入。为此,请尝试:
$('a.changeme').on('click', function() {
var
$tmp = $(this).closest('.target').contents().not(this).eq(0),
dia = document.createTextNode('Do it again ');
$tmp.length > 0 ? $tmp.replaceWith(dia) : $(dia).insertBefore(this);
});
答案 1 :(得分:1)
您可以使用.contents()
:
//set the new text to replace the old text
var newText = 'New Text';
//bind `click` event handler to the `.changeme` elements
$('.changeme').on('click', function () {
//iterate over the nodes in this `<span>` element
$.each($(this).parent().contents(), function () {
//if the type of this node is undefined then it's a text node and we want to replace it
if (typeof this.tagName == 'undefined') {
//to replace the node we can use `.replaceWith()`
$(this).replaceWith(newText);
}
});
});
以下是演示:http://jsfiddle.net/jasper/PURHA/1/
雅的一些文档:
.contents()
:http://api.jquery.com/contents .replaceWith()
:http://api.jquery.com/replacewith typeof
:https://developer.mozilla.org/en/JavaScript/Reference/Operators/typeof var newText = 'New Text';
$('a').on('click', function () {
$.each($(this).parent().contents(), function () {
if (typeof this.tagName == 'undefined') {
//instead of replacing this node with the replacement string, just replace it with a blank string
$(this).replaceWith('');
}
});
//then add the replacement string to the `<span>` element regardless of it's initial state
$(this).parent().prepend(newText);
});
答案 2 :(得分:1)
你可以试试这个。
var $textNode, $parent;
$('.changeme').on('click', function(){
$parent = $(this).parent();
$textNode= $parent.contents().filter(function() {
return this.nodeType == 3;
});
if($textNode.length){
$textNode.replaceWith('Content changed')
}
else{
$parent.prepend('New content');
}
});
答案 3 :(得分:1)
你走出jQuery,因为它无法帮助你处理文本节点。以下将删除具有“target”类的每个<span>
元素的第一个子元素,当且仅当它存在并且是文本节点时。
演示:http://jsfiddle.net/yx5Ju/11/
代码:
$('span.target').each(function() {
var firstChild = this.firstChild;
if (firstChild && firstChild.nodeType == 3) {
firstChild.data = "Do it again";
}
});
答案 4 :(得分:0)
我猜这不是一个完美的例子,但你可以使用contents函数。
console.log($("span.target").contents()[0].data);
答案 5 :(得分:0)
您可以将文本换行到一个范围......但是......
试试这个。 http://jsfiddle.net/Y8tMk/
$(function(){
var txt = '';
$('.target').contents().each(function(){
if(this.nodeType==3){
this.textContent = 'done ';
}
});
});
答案 6 :(得分:0)
您可以更改对象的本机(非jquery)数据属性。在这里更新了jsfiddle:http://jsfiddle.net/elgreg/yx5Ju/2/
类似的东西:
$('a.changeme3').click(function(){
$('span.target3').contents().get(0).data = 'Do it again';
});
contents()获取内部并且get(0)将我们返回到原始元素,而.data现在是对本机js textnode的引用。 (我还没有测试过这个跨浏览器。)
这个jsfiddle和答案实际上只是对这个问题答案的扩展解释: Change text-nodes text
答案 7 :(得分:0)
$('a.changeme').click(function() {
var firstNode= $(this).parent().contents()[0];
if( firstNode.nodeType==3){
firstNode.nodeValue='New text';
}
})
编辑:不确定您需要哪种布局规则,更新以仅测试第一个节点,否则根据需要进行调整