CODEWITHSUNDEEP
javascriptjquery
Stuborg
Stuborg

Reputation: 121

jquery each function to replace an existing html content

I am trying to replace the text inside all the p tags which has a particular class. My html code is

<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>

and scripts

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

but the issue is that the scripts are not going inside the each function even though the html class is present. Can someone tell me what I am missing here.

Upvotes: 0

Views: 56

Answers (2)

Redu
Redu

Reputation: 26161

The innerHTML value is a string type and it is immutable. So the replace method;

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

won't mutate str however it will return a new one. So, in this particular case you are expected to do like;

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

On the other hand without jQuery you can always do this with pure JS very simply;

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>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is because you're replacing the value, but you don't do anything with the result. You need to set it back to the html() method:

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

Or better yet, you can give the html() method a function to be run on each element, and avoid the use of each() completely:

$('.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>

Upvotes: 7

Related Questions