How do I change a
tag class name when it has a weird looking class name for it?

Question

Heres the original div tag im working with:

<div class="stadvancedmenu_sub advanced_style_wide col-md-0" style="display: none; overflow: visible;">

My issue is that when I try using jquery code to replace the class name with something else, it doesn't work. It might be the name itself but I don't know. This is what I used:

$('.stadvancedmenu_sub.advanced_style_wide.col-md-0').addClass('ddMenu').removeClass('.stadvancedmenu_sub.advanced_style_wide.col-md-0');

Keep in mind that I can't just go in and change the wording manually or anything since I don't have access to the document to edit it but I can add code to the document to make changes. This is why I'm asking what method I should use to change the name of the class to a much simpler name.

I also tried javascript and tried calling it using this function:

function replace() {
  var newClass = document.getElementsByClassName('.stadvancedmenu_sub.advanced_style_wide.col-md-0')[0];
  newClass.setAttribute('class','newClassName')
}
replaceClass();

but didn't work because (from my assumption) the name of the class being weird and having spaces etc.

score 2 · Answer 1 · answered Jul 25 '18 at 14:11

2

No class name "has spaces", if there is a space they are seperate classes.

You initial selector is wrong, because it does not target the element by class correctly, try the following:

$('.stadvancedmenu_sub.advanced_style_wide.col-md-0')

When you want to target all elements which have "multiple specific classes" then you concat the class names with a dot '.'

answered Jul 25 '18 at 14:11

MKougiouris

2,308
1
12
16

applied this and it didn't work. – Victor M. Jul 25 '18 at 14:17
Change your remove class to this removeClass('stadvancedmenu_sub advanced_style_wide col-md-0') you do not need to concat them there, you need to have them with spaces to remove all classes – MKougiouris Jul 25 '18 at 14:30
I tried $('.stadvancedmenu_sub.advanced_style_wide.col-md-0').addClass('ddMenu').removeClass('stadvancedmenu_sub advanced_style_wide col-md-0'); but it didn't change anything. – Victor M. Jul 25 '18 at 14:38

Mamun · Accepted Answer · 2018-07-26T04:42:51.090

1

Since all the classes in the selector represent the same element, remove spaces between the classes and precede . (dot) to the class names. Change your selector to:

$('.stadvancedmenu_sub.advanced_style_wide.col-md-0')

But if you want to use getElementsByClassName()then you should not specify . (dot) and specify space between the class names in the selector:

document.getElementsByClassName('stadvancedmenu_sub advanced_style_wide col-md-0')

function replaceClass() {
  var newClass = document.getElementsByClassName('stadvancedmenu_sub advanced_style_wide col-md-0')[0];
  newClass.setAttribute('class','newClassName');
  newClass.style.display = 'block';
  newClass.style.color = 'red';
}
replaceClass();

<div class="stadvancedmenu_sub advanced_style_wide col-md-0" style="display: none; overflow: visible;">Test test test test</div>

edited Jul 26 '18 at 04:42

answered Jul 25 '18 at 14:07

Mamun

58,653
9
33
46

changed the name and added the period but it didn't change the class name within the code when I checked. – Victor M. Jul 25 '18 at 14:15
@VictorM., please check out my updated answer.... – Mamun Jul 25 '18 at 14:22
do i need to use the ajax link? – Victor M. Jul 25 '18 at 14:41
Tried the new function you made and it didn't work. – Victor M. Jul 25 '18 at 14:43
@VictorM., no you do not need the link.... – Mamun Jul 25 '18 at 14:45
@VictorM., I have used your function.....only changes the selector.....is the answer in the snippet working as the way you expect? – Mamun Jul 25 '18 at 14:48
@VictorM., in your code you have created a function named `replace` but calling that as `replaceClass`........ – Mamun Jul 25 '18 at 14:51
Oh ok. and yea the snippit is working as I wanted it to do but when I applied the changes you made/suggested it didn't do anything. – Victor M. Jul 25 '18 at 16:23
@VictorM., the element `div` does not contain anything. I have some sample text. It does not have closing tag (``).....you can try my updated code. – Mamun Jul 26 '18 at 04:42

score 0 · Answer 3 · answered Jul 25 '18 at 14:14

0

Try this code

<div id="mydiv" class="stadvancedmenu_sub advanced_style_wide col-md-0" style="display: none; overflow: visible;"> 

$("#mydiv").attr("class","new_class_name");

answered Jul 25 '18 at 14:14

Pycc34

97
1
1

like I mentioned before, I can't go in and add an ID or edit the existing code itself since I don't have access. So this won't work in my case. – Victor M. Jul 25 '18 at 14:16

score 0 · Answer 4 · answered Jul 25 '18 at 14:16

0

Your jQuery selector doesn't work because you are using the wrong syntax for multiple classes. Each class an element has needs to be preceded by the class selector ., and not have a space in between as that indicates the next selector after it is some decedent element.

So

$('.stadvancedmenu_sub advanced_style_wide col-md-0')

Would be:

$('.stadvancedmenu_sub.advanced_style_wide.col-md-0')

As for your getElementsByClassName() that didn't work because unlike jQuery or the native querySelector() method which use a CSS selector, gEBCN uses the exact name used in the class.

So

getElementsByClassName('.stadvancedmenu_sub.advanced_style_wide.col-md-0')

would be

getElementsByClassName('stadvancedmenu_sub advanced_style_wide col-md-0')

or just one of the many classes

getElementsByClassName('stadvancedmenu_sub')

You would also have to make sure you run the code at the right time. If you try to run the jQuery call when the element doesn't exist yet then nothing will happen, not even an error. If you try it with the native getElementsByClassName though you should be getting an error about accessing an undefined valued

answered Jul 25 '18 at 14:16

Patrick Evans

38,456
6
62
84

made the changes and tried what you said with the javascript code but nothing changed. The class name in the div tag stays the same. – Victor M. Jul 25 '18 at 14:21
@VictorM. when are you running the code? When is that particular div added to the document? Is it added through some dynamic process (eg Ajax)? As stated if you don't run it after the element exists then it wont work. – Patrick Evans Jul 25 '18 at 14:22
I'm not really sure. I'm using some in browser website editor like squarespace that already has a pre-made website. I'm not sure if its using ajax etc. And how would I run it after the element exists? – Victor M. Jul 25 '18 at 14:35
@VictorM. Where is squarespace putting your javascript code in relation to the premade website? Is it putting your code directly in a ` – Patrick Evans Jul 25 '18 at 14:54
Yea, the script seemed to be placed within the header of the website. Within that header, it has other codes with its own script tags. And here is a link to the site itself. https://marketflux.foundrycommerce.com/LogonLink/1f14ea3b-cb1c-e811-80eb-0cc47a7eded9? – Victor M. Jul 25 '18 at 16:33
@VictorM. Yea your code is running before anything in the document has been created. Use an DOM ready event, See this question for how to do that: [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Patrick Evans Jul 25 '18 at 16:42

How do I change a tag class name when it has a weird looking class name for it?

4 Answers4

How do I change a
tag class name when it has a weird looking class name for it?