![](/img/trans.png)
[英]Replace only text inside div and toggle different div content using jquery
[英]Replace only text inside a div using jquery
我有一个像:
<div id="one">
<div class="first"></div>
"Hi I am text"
<div class="second"></div>
<div class="third"></div>
</div>
我正在尝试使用 jquery 仅将文本从“嗨,我是文本”更改为“嗨,我是替换”。 这可能很容易,但我无法做到。
使用$('#one').text('')
只会清空整个#One
div。
文本不应单独存在。 将其放入span
元素中。
改成这样:
<div id="one">
<div class="first"></div>
<span>"Hi I am text"</span>
<div class="second"></div>
<div class="third"></div>
</div>
$('#one span').text('Hi I am replace');
找到文本节点( nodeType==3
)并替换textContent
:
$('#one').contents().filter(function() {
return this.nodeType == 3
}).each(function(){
this.textContent = this.textContent.replace('Hi I am text','Hi I am replace');
});
请注意,根据 文档,您可以将上面的硬编码3
替换为Node.TEXT_NODE
,这更清楚您在做什么。
$('#one').contents().filter(function() { return this.nodeType == Node.TEXT_NODE; }).each(function(){ this.textContent = this.textContent.replace('Hi I am text','Hi I am replace'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="one"> <div class="first"></div> "Hi I am text" <div class="second"></div> <div class="third"></div> </div>
您需要将文本设置为空字符串以外的内容。 此外,.html() 函数应该在保留 div 的 HTML 结构的同时执行此操作。
$('#one').html($('#one').html().replace('text','replace'));
如果您确实知道要替换的文本,则可以使用
$('#one').contents(':contains("Hi I am text")')[0].nodeValue = '"Hi I am replace"';
要么
$('#one').contents(':not(*)')[1].nodeValue = '"Hi I am replace"';
$('#one').contents(':not(*)')
在这种情况下选择非元素子节点文本节点,第二个节点是我们要替换的节点。
以防万一,如果您无法更改 HTML。 非常原始但简短且有效。 (它将清空父 div,因此将删除子 div)
$('#one').text('Hi I am replace');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="one"> <div class="first"></div> "Hi I am text" <div class="second"></div> <div class="third"></div> </div>
另一种方法是保留该元素,更改文本,然后将该元素追加回来
const star_icon = $(li).find('.stars svg')
$(li).find('.stars').text(repo.stargazers_count).append(star_icon)
我有同样的问题,但文本是父元素内的第一个节点。 在这种情况下,您可以执行以下操作,而且速度非常快:
// find the children elements
termsChildren = $('#one').children()
// replace the text, then re-append the children element.
$('#one').text(' "Hi I am replace" ').append(termsChildren)
否则,您必须指定哪些孩子必须在文本之前,哪些必须在之后:
// find the children elements
termsChildren = $('#one').children()
// remove all the content
$('#one').text(' ')
// append the first child element
$('#one').append(termsChildren[0])
// add the new text and then the other children
$('#one').text(' "Hi I am replace" ').append(termsChildren.slice(1))
当您用 jQuery 替换元素的纯文本时,您不能将纯文本单独放置,否则它将清除和/或替换整个元素。 您应该将所有纯文本放在<span>
元素中:
$(document).ready(function() { $("#change-btn").click(function() { $("#one").children("span").text("Hi I am replace"); }); });
<!-- Import CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <!-- Import JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <div class="m-2"> <div id="one"> <div class="first"></div> <span>Hi I am text</span> <div class="second"></div> <div class="third"></div> </div> <button type="button" class="btn btn-primary btn-sm mt-2" id="change-btn">Click to change text</button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.