Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

ULTRA simple JQuery not working – Adding a single class

I’m a complete noob at JQuery, CSS and all this stuff. I’m trying to do something more complex but the very first step is already failing, for some bewildering reason. All I am trying to do right now is add a class to certain elements. I have reduced the problem to a minimum reproducible example. Here is the JSFiddle:

https://jsfiddle.net/ZeHgS/8of76kcL/31/

My code is simply:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

$("li").addClass("cat-parent");

But nothing happens at all. None of the LI have this class after I run it.

What I ultimately wanted to do was something a bit more complex:

$("li.wc-block-product-categories-list-item:has(ul.wc-block-product-categories-list).addClass("cat-parent");

Not sure if the syntax is correct but nothing happens when I try that either.

So, in words, what I really want is to add the "cat-parent" class to all LI that have ULs of a specific class. The actual ULs have one other class in addition to the one that I used above, but this extra class has different numbers at the end for each UL. Does it also need to be included for the selection to work? If so, would it be written as I have below?

$("li.wc-block-product-categories-list-item:has(ul.wc-block-product-categories-list[class^="wc-block-product-categories-list.wc-block-categories-list--depth-"]).addClass("cat-parent");

The full UL classes are something like "wc-block-product-categories-list[class^="wc-block-product-categories-list wc-block-categories-list–depth-1", where the number at the end varies.

Why on earth is this simple code not working for me?

>Solution :

before run Jquery please add Jquery library, please add and check it again it is working

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading