CODEWITHSUNDEEP
jquery
CSS Apprentice
CSS Apprentice

Reputation: 939

How To Convert A className Into An ID in jQuery

In my example I have a basic tabbed content setup. The buttons have classes that match the divs IDs. onClick, I'd like to grab the className, and find an ID with the same name

enter image description here

jQuery:

$("li").click(function() {
   var liClass = this.className;
   $("li").removeClass("active");
   $("#"+liClass).addClass("active"); 
});

jsFiddle: https://jsfiddle.net/CSS_Apprentice/kpo7t6xh/

Upvotes: 1

Views: 102

Answers (2)

Jacky Shek
Jacky Shek

Reputation: 955

You may use some prefix to match you classes and id

$("li").click(function() {
     var target_class = "";
            var classList = $(this).attr('class').split(/\s+/);
            for (var i = 0; i < classList.length; i++) {
                  var matches = /^prefix_(.+)/.exec(classList[i]);
                  if (matches != null) {
                    var fxclass = matches[1];
                    target_class = "prefix_"+fxclass+"";
                  }
            }
       $("li").removeClass("active");
       $("div").removeClass("active");
       $("#"+target_class ).addClass("active"); 
});

Upvotes: 0

zer00ne
zer00ne

Reputation: 44086

Here's what's wrong:

 $("li").removeClass("active");

Should be:

 $("div").removeClass("active");

The `.active class was on the divs not the lis.

FIDDLE

Upvotes: 1

Related Questions