I'm having trouble with a seemingly simple task that I can't seem to find any help for online.
My CSS class names include ampersands in them (due to the system I'm using), and I need to remove these using jQuery. For example, I want to change:
class="Middle&East"
to
class="MiddleEast"
If anyone could offer some assistance with this, it would be greatly appreciated.
Thank you
To update all of them, here is a solution:
$('[class*=\\&]').each(function() {
$(this)[0].className = $(this)[0].className.replace(/&/g,"");
})
Give it a shot:
var region = "Middle&East";
region.replace('&', '');
If you're using jQuery, make sure to escape the "&" character.
Here's a suggestion:
$(".Middle\\&East").removeClass("Middle&East").addClass("MiddleEast");Here is a general solution for removing the "&" from a class name:
$(function(){
$('[class*="&"]').each(function(){
var $this = $(this),cname = $this.attr('class').replace(/&/g,'');
$this.attr('class',cname)
})
})
Possibly consider this alternative
$(".Middle&East").removeClass("Middle&East").addClass("MiddleEast");
I found a solution that works for my needs:
$(function() {
$('[class="Middle&East"]').toggleClass('Middle&East MiddleEast');
});
You can test it out on jsfiddle here: http://jsfiddle.net/U3r7G/
let targetClass = $(el).attr('class');
let newClass = targetClass.replace('&', '');
$(el).attr('class', newClass);
When working with Next.js App Router in SSR, how can I retrieve the complete URL of the current page? I am unable to use window.location.href due to the absence of a defined window object, and using useRouter() does not provide access to the full URL. ...
Looking for a way to enclose the editable form within a bootstrap uib-popover-template. Tried the editable ui-bootstrap popover method, but encountering unexpected issues. Check out Plunker 1 --> https://plnkr.co/edit/vXeVoFYVU2IU08CF Issue with angul ...
Currently, I am following the PeepCode video tutorial on Backbone.js, but I am rewriting all the code in CoffeeScript instead of plain JavaScript. Everything is going well so far, except when I attempt to run Jasmine tests on the code, I encounter some Ty ...
I am looking to create a unique div with a random background color and a width of 100px. Additionally, I want to have a button that, when clicked, will split the original div into two equal parts, each with its own random background color. With each subs ...
I am currently learning React Js through the official tutorial where we are building a tic-tac-toe game. To create the square boxes in the game board, initially I hard-coded all the squares like this: render(){ return ( <div> <div cla ...
My AJAX function, written in coffeescript, is successfully returning values. However, neither the error nor the success callbacks are being triggered. $ -> $('#sf_field').autocomplete source: (request, response) -> $.ajax ...
Everything was running smoothly until I suddenly encountered this error message: ReferenceError: next is not defined. I'm puzzled because I didn't make any changes to this function. const Users = require('../data/users.model') exports ...
Here is the code I am working with: // CSS .foo strong { float: right; } // HTML <div class="foo"> foo <strong>bar</strong> </div> I am trying to float the "strong" element to the right, but unfortunately Internet Exp ...
<html> <head> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a0c0f1f3a48544c544b48">[email protected]</a>/dist/vue.js"></script> ...
I encountered an issue while trying to modify data in my database. When my api request is made, I am receiving the following error: Uncaught (in promise) SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) Additionally, I am r ...
Looking to transform text into an image with a shareable link in ReactJS, similar to Spotify's lyrics sharing feature. I haven't attempted any solutions so far. I've explored various libraries without success. ...
While the Angular documentation covers how to listen for child events from parents, my situation is actually the opposite. In my application, I have an 'admin.component' that serves as the layout view for the admin page, including elements such a ...
I followed the tutorial located at and implemented the following code. // Module dependencies. var application_root = __dirname, express = require( 'express' ), //Web framework path = require( 'path' ), //Utilities for dealing with fi ...
I've been pondering this issue all day. I have a button that should withdraw a student from a class, which is straightforward. However, it should also check the database for a waiting list for that class and enroll the next person if there is any. In ...
Is it possible for a template to return three different values instead of just two, based on the data? I am familiar with using two conditions, but is there a way to use more than two without getting a syntax error? <option {{ change === 1 ? &apos ...
I am looking to automatically indent wrapped contents based on the first line. To achieve this, I implemented the following HTML and CSS code: li { padding-left: 10px; text-indent: 10px; } .Slides { width: 20em; //Display wrap-around } <div cla ...
Seeking assistance for a simple task that is eluding me at the moment. I am currently using scss and trying to make a button only appear when hovered over. The button is hidden in the code snippet below, nested within a block alongside some svgs. Any hel ...
I am currently utilizing the MongoDB API within CosmosDB. The structure of my document in CosmosDB looks like this: { "_id": "Companies", "companies_list": [ { "name":"c1", "host": "www.example1.com" },{ ...
Hi there, I'm currently working on binding some data using onclick events. I am able to confirm that the data binding is functioning properly as I have included interpolation in the HTML to display the updated value. However, my challenge lies in upd ...
When I set the height of an image to 50%, its container's height remains the same instead of automatically adjusting. HTML: <section class="img-show"> <div class="img-container"> <ul> <li cla ...