如何在不使用 jQuery 更改 html 的情况下更改元素的兄弟文本？答案

【问题标题】：How to change sibling text of element without changing html using jQuery?如何在不使用 jQuery 更改 html 的情况下更改元素的兄弟文本？
【发布时间】：2017-01-29 12:51:13
【问题描述】：

我正在尝试仅替换文本，但没有触及任何其他标签。

<p>
    <a href="login.php">
        <i class="fa fa-sign-in"></i> 
        Login
    </a>
</p>

$('p').each(function() {
    $(this).text($(this).text.replace('Login', 'Anmeldung')); 
});

不好的结果：

<p>
    Anmeldung       
</p>

我想要的结果：

<p>
    <a href="login.php">
        <i class="fa fa-sign-in"></i> 
        Anmeldung
    </a>
</p>

我该怎么做？这只是一个示例，p 标签的深层结构可能完全不同。

【问题讨论】：

如果您可以选择的唯一元素是p，您将需要递归遍历子元素和节点，并直接替换该元素中的text()。替换父级的text() 会有去除HTML的效果
JQuery change inner text but preserve html的可能重复
您要更改部分文本还是全部？
为什么只使用 jQuery？就好像你不知道 jQuery 不是一种语言...
@evolutionxbox jQuery 非常适合对 DOM 进行操作。如果他在他的应用程序中使用 jQuery，为什么还要使用更复杂的 vanilla js 解决方案？

标签： javascript jquery html text replace

【解决方案1】：

<p>
  <a href="login.php">
    <i class="fa fa-sign-in"></i> 
    Login
  </a>
</p>

$('p').each(function() {
  $(this).find("a").text($(this).find("a").text.replace('Login', 'Anmeldung')); 
});

【讨论】：

This is only a sample, deeper structure of p tags can be completely different.。此外，您的代码将清除 a 中的 i
标签呢？

【解决方案2】：

将要替换的文本包装在跨度或其他内容中。

<p>
    <a href="login.php">
        <i class="fa fa-sign-in"></i> 
        <span class="replace-login">Login</span>
    </a>
</p>

和js

    $('.replace-login').each(function() {
       $(this).text($(this).text.replace('Login', 'Anmeldung')); 
   });

【讨论】：

谢谢，但我正在寻找不更改 HTML 的解决方案。因为这将是很多工作！

【解决方案3】：

如果要更改i 的所有文本兄弟，请在p 中选择i 标记并使用Node.nextSibling 属性选择元素后的兄弟文本并进行更改。

$("p &gt; a &gt; i")[0].nextSibling.nodeValue = "Anmeldung";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <a href="login.php">
        <i class="fa fa-sign-in"></i> 
        Login
    </a>
</p>

但如果要替换部分文本，请使用此代码

$("p > a").html(function(i, html){
    return html.replace("Login", "Anmeldung");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <a href="login.php">
        <i class="fa fa-sign-in"></i> 
        Login
    </a>
</p>

【讨论】：

p里面的结构没有给出。这只是一个示例，因此您的解决方案将不起作用。

【解决方案4】：

你可以试试这个DEMO LINK HERE

<p>
    <a href="login.php">
        <i class="fa fa-sign-in"></i> 
        Login
    </a>
</p>

JS..

$('p').each(function() {
    $(this).html($(this).html().replace('Login', 'Anmeldung')); 
});

http://jsfiddle.net/hnfRe/402/

【讨论】：

你能把小提琴加入你的答案，而不是链接到异地吗？

【解决方案5】：

使用.html() 代替.text()
这会保留您的 html 标签

$('p').each(function() {
    $(this).html($(this).html().replace('Login', 'Anmeldung')); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <a href="login.php">
        <i class="fa fa-sign-in"></i> 
        Login
    </a>
</p>

Fiddle 使用您的示例。

【讨论】：

【解决方案6】：

使用 html 代替文本函数。 . .

$('p').html($(this).html().replace('Login', 'Anmeldung'));

【讨论】：