jquery每個函數來替換現有的html內容

Question

我想要替換所有具有特定類的p標籤內的文本。我的HTML代碼

<p class="fb-question">Lorem ipsum dolor sit amet, {{2fill}} ea eos eirmod dissentiet efficiantur. Porro facilisi pericula vim id.</p> 
<p class="fb-question">tempor verear eum no. Facer {{2fill}} assum ut eos. Odio mutat vis ad.</p> 
<p class="fb-question">Liber noster ei cum. Sed {{2fill}} an electram comprehensam, at hendrerit urbanitas eam,</p> 
<p class="fb-question">etiam minimum mentitum cu {{2fill}} cum, ea rebum legimus utroque nam.</p> 

和腳本

jQuery('.fb-question').each(function(){ 
    jQuery(this).html().replace('{{2fill}}', '<span id="blank"></span>'); 
}); 

但問題是，腳本不是每個函數裏面去，即使HTML類是存在的。 有人能告訴我我在這裏失蹤了什麼。

Answer 1

問題是因爲你正在替換值，但你對結果沒有做任何事情。您需要將其設置回html()方法：

$('.fb-question').each(function(){ 
    $(this).html($(this).html().replace('{{2fill}}', '<span id="blank"></span>')); 
}); 

或者更好的是，你可以給html()方法的功能，在每個元素上運行，並避免使用each()完全：

$('.fb-question').html(function(i, h){ 
 
    return h.replace('{{2fill}}', '<span id="blank"></span>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="fb-question">Lorem ipsum dolor sit amet, {{2fill}} ea eos eirmod dissentiet efficiantur. Porro facilisi pericula vim id.</p> 
 
<p class="fb-question">tempor verear eum no. Facer {{2fill}} assum ut eos. Odio mutat vis ad.</p> 
 
<p class="fb-question">Liber noster ei cum. Sed {{2fill}} an electram comprehensam, at hendrerit urbanitas eam,</p> 
 
<p class="fb-question">etiam minimum mentitum cu {{2fill}} cum, ea rebum legimus utroque nam.</p>

Answer 2

的innerHTML值是字符串類型，它是不可變的。所以replace方法;

var str = "myString"; 
str.replace("my","your"); 

不會變異str但是它會返回一個新的。所以，在這個特殊的情況下，你應該會喜歡;

str = str.replace("my","your"); 

另一方面，如果沒有jQuery，您可以隨時用純JS完成此任務;

document.querySelectorAll(".fb-question") 
 
     .forEach(p => p.innerHTML = p.innerHTML.replace('{{2fill}}', '<span id="blank"></span>'));

<p class="fb-question">Lorem ipsum dolor sit amet, {{2fill}} ea eos eirmod dissentiet efficiantur. Porro facilisi pericula vim id.</p> 
 
<p class="fb-question">tempor verear eum no. Facer {{2fill}} assum ut eos. Odio mutat vis ad.</p> 
 
<p class="fb-question">Liber noster ei cum. Sed {{2fill}} an electram comprehensam, at hendrerit urbanitas eam,</p> 
 
<p class="fb-question">etiam minimum mentitum cu {{2fill}} cum, ea rebum legimus utroque nam.</p>