How can you use JavaScript to swap out a character in various elements sharing the same class?

Question

How can you use JavaScript to swap out a character in various elements sharing the same class?

My webpage contains multiple paragraphs with the same class name. I need to remove a specific character from all of them. My attempt at using jQuery is as follows:

  var str = $(".foo").html;
  var res = str.split("　").join("");
  $(".foo").html = res;

Unfortunately, this code snippet results in an error:

TypeError: str.split is not a function

I have observed that when I target a single paragraph using its unique Id, the code works perfectly. However, it fails when attempting to apply it to multiple paragraphs with the same class names simultaneously.

javascript split classname

Answer 1

Answer №1

$(".foo") retrieves a list, so it's important to loop through each paragraph and update its content individually. The each function can be used like this:

$( ".foo" ).each(function( index, element ) {
     $(element).html( $(element).html().split(" ").join("") );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="foo">hello world</p>
<p class="foo">hello world</p>
<p class="foo">hello world</p>

Answer 2

$(".foo") retrieves a list, so it's important to loop through each paragraph and update its content individually. The each function can be used like this:

$( ".foo" ).each(function( index, element ) {
     $(element).html( $(element).html().split(" ").join("") );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="foo">hello world</p>
<p class="foo">hello world</p>
<p class="foo">hello world</p>

Answer 3

Answer №2

Take advantage of jQuery's each method

Answer 4

Take advantage of jQuery's each method

How can you use JavaScript to swap out a character in various elements sharing the same class?

Answer №1

Answer №2

Similar questions

Utilizing the parameter "error" to distinguish unsuccessful tasks within async.mapLimit

Issue with Ajax form submission on one specific page

Tips for showcasing messages in a .dust file with connect-flash and express-messages in a Node application

Bringing a JavaScript file into an Ionic/Angular 2 project

Efficient method for preserving dependent dropdown selections with Select2 and Ajax

What could be the reason behind encountering a "Cannot return null for non-nullable field" error while attempting a mutation?

Guide on concatenating the output values using jQuery

The combination of Angular Hottowel's 'blocks.exception' and 'blocks.router' prevents the App from being displayed in the browser

Is there a way to redirect focus to an object with a lower z-index when working on overlaying a sequence of transparent divs on a map?

Display Image Automatically Upon Page Opening

JSON data converted into an adjacency list

The Cheerio.js .each() method produces a single long string if paired with .find('a').text()

Can an Object be extracted from a nested array using a MongoDB Query?

"Enhance user experience with jQuery's text expansion and collapse

Retrieve an ObjectId from a Mongoose database using the name in Node.js

Click on the login button once the field has reached its maximum length

How to display the name of the parent object using JavaScript's prototypal inheritance

How can I refresh a Vue.js component when a prop changes?

What steps should be taken to resolve the error message "TypeError: Cannot read properties of undefined (reading 'toLowerCase')?"

Validation of the email address continually fails