Question

您好我正在尝试使用JQuery替换文本。但它用重复的文字代替。

我试过下面的代码：

HTML代码

<a class="text_div">
    This div contains some text.
</a>
<br>
<a class="text_div">
    This div contains some text.
</a>
<br>
<a class="text_div">
    This div contains some text.
</a>

jQuery代码

$(document).ready(function(){
    var text = $('[class="text_div"]').text();
  var new_text = text.replace("contains", "hello everyone");  
  $('[class="text_div"]').text(new_text);
});

导致OUT Put

This div hello everyone some text. This div contains some text. This div contains some text. 
This div hello everyone some text. This div contains some text. This div contains some text. 
This div hello everyone some text. This div contains some text. This div contains some text.

期待

This div hello everyone some text.
This div hello everyone some text. 
This div hello everyone some text.

Answer 1

您正在尝试获取所有.text_div元素的文本并进行更改。

使用jquery .text( function )逐个更改元素的文本。

＆＃13;

$(".text_div").text(function(index, text){
    return text.replace("contains", "hello everyone");  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="text_div">
    This div contains some text.
</a>
<br>
<a class="text_div">
    This div contains some text.
</a>
<br>
<a class="text_div">
    This div contains some text.
</a>

＆＃13;

您也可以使用each()方法完成这项工作。

Answer 2

你有多个div尝试循环

$(document).ready(function(){
     $('[class="text_div"]').each(function(i,v){
    var text =$(v).text();
  var new_text = text.replace("contains", "hello everyone");  
  $(v).text(new_text);
});
});

Answer 3

试试这个

  $('.text_div').each(function(x){
    var new_text = $(this).text().replace("contains", "hello everyone"); 
    $(this).text(new_text);
  })

对于评论中的问题尝试：

<a class="text_div">
    This div contains - some text.
</a>
  $('.text_div').each(function(x){
        var new_text = $(this).text().split('-'); 
        $(this).html(new_text[0]+'span style="color:red;font:bold;">'+new_text[1]+'</span>');
      })

Answer 4

首先，您可以使用类选择器来获取元素，而不是使用速度更慢（相对）的属性选择器：$('.text_div')。

您的实际问题是因为您正在一起选择所有元素，因此text()方法返回单个字符串中所有元素的文本。要解决这个问题，您可以使用each()：

分别遍历每个元素

$(document).ready(function(){
    $('.text_div').each(function() {
        var text = $(this).text().replace("contains", "hello everyone");
        $(this).text(text);
    });
});

更好的是为text()方法提供一个函数，该函数针对匹配集中的每个元素执行：

$(document).ready(function(){
    $('.text_div').text(function(i, t) {
        return t.replace("contains", "hello everyone");
    });
});

＆＃13;

$(document).ready(function() {
  $('.text_div').text(function(i, t) {
    return t.replace("contains", "hello everyone");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="text_div">
    This div contains some text.
</a>
<br>
<a class="text_div">
    This div contains some text.
</a>
<br>
<a class="text_div">
    This div contains some text.
</a>

＆＃13;

Answer 5

我没有测试代码，但似乎

var text = $（'[class =“text_div”]'）。text（）; 必须返回所有三个元素的文本...（例如输入将重复三次以便输出也是如此）

使用JQuery替换文本

5 个答案: