jQuery .addClass function not adding class

Question

I'm attempting to add a class for highlighting certain elements on my web page. I'm using the jQuery("selector").addClass("class") function to do that. However, it does not work.

function toggleHighlight(selector, on) {
  if (on) {
    $(selector).addClass("highlighted");
  } else {
    $(selector).removeClass("highlighted");
  }
}

When the on argument is true and the selector argument is a valid selector, it enters the if clause and exits. Unfortunately the classes of the elements the selector refers to, remain unchanged. I seem to missing something fairly fundamental. Help would be appreciated.

EDIT:

I left out the console.log($(selector)); and console.log($(".highlighted")); statements earlier, for clarity. The first returns the right elements, the second, none (called after .addClass()). The elements themselves are <path> elements created by leaflet for a map (from GeoJSON). As such, the HTML is rather hard to reproduce.

I have called the function form a button on the page: <input type="button" id="toggle-0702" class="btn btn-default" onClick="toggleHighlight('.node-0112', true)" value="turn on" \> as well as directly from the JS console. Same results.

EDIT 2:

Apparently this is an issue with either <path> elements, or (more likely) leaflet. To demonstrate this: http://jsfiddle.net/mrz40jgw/. Notice the shy class on the second circle.

Are you sure the selector is valid? if you do `$(selector)` in the console in dev tools at that moment, is the returned array not empty? — Antoine, Nov 13 '15 at 12:12
You should make sure that you're calling this after the dom has been loaded — Hacketo, Nov 13 '15 at 12:15
Please check if your selector has the required prefix (e.g. id*,id$,#,.) — Rajan Goswami, Nov 13 '15 at 12:31
this should work. http://jsfiddle.net/h0r7bu51/ you should read the answer provided by Kendas to see why — chillichief, Nov 13 '15 at 16:51

score 3 · Answer 1 · answered Nov 13 '15 at 12:15

We don't have enough information to say exactly what's going on, but unless you've interferred with jQuery, we can rule out that addClass is broken. Thus, one of the following is likely true:

toggleHighlight is not being called when you think it is. Use console.log to debug this.
$(selector) is not yielding what you think it is. Use console.log to debug this.

Or perhaps most likely:

Adding the class highlight does not affect the targeted elements in the manner you think it ought to, perhaps due to a selector of greater specificity. Debug this by manually setting the class and verify how that affects the visual properties of the element.

Note that jQuery already has a toggle for classes, so your code can be simplified to:

function toggleHighlight(selector, on) {
  $(selector).toggleClass("highlighted", on);
}

I cleaned up the code up a bit and in fact it originally looked more like this: function toggleHighlight(selector, on) { console.log($(selector)); if (on) { $(selector).addClass("highlighted"); console.log(".highlighted"); } else { $(selector).removeClass("highlighted"); } } The first line into the log yielded a correct number of elements, the second, none. Regarding the .toggleClass() function, I'll take that into consideration, though when I think about it, my original function might be just misnamed. — Kendas, Nov 13 '15 at 12:40

score 1 · Accepted Answer · edited May 23 '17 at 11:59

It would appear that the problem lies with jQuery's inability to change classes on SVG elements: jQuery SVG, why can't I addClass?

For the record, here's my solution in light of the new information:

function toggleHighlight(selector, on) {
    var oldClasses = [];
    var newClasses = "";
    var elements = $(selector)
    for (var i = 0; i < elements.length; i++) {
        oldClasses = $(elements[i]).attr("class").split(" ");
        newClasses = "";
        for (var j in oldClasses) {
            if (oldClasses[j] != "highlighted") {
                newClasses += " " + oldClasses[j];
        }}
        if (on) {
            newClasses += " highlighted";
        }
        $(elements[i]).attr("class", newClasses.trim());
}}

jQuery .addClass function not adding class

2 Answers2