Unable to remove css class and add a new one

Question

I have this function that goes through each breadcrumb in a navbar and I want to change the styling of the breadcrumb depending what page they are on.

Here is the basic HTML of the breadcrumb navbar

<div id="WCBar">

<div class="bc_nav current span" id="bc_main">
<a class="bc_1" id="lnkCrumb" href="javascript:__doPostBack('ctl00$breadcrumbnav1$ctl00$lnkCrumb','')"> 
<li>Account Info</li></a>
<span class="step-arrow"></span>
<input name="ctl00$breadcrumbnav1$ctl00$hdnPageName" id="hdnPageName" type="hidden" value="WCQuoteMain2.aspx">
</div>


<div class="bc_nav a" id="bc_main">
<a class="aspNetDisabled bc_2" id="lnkCrumb"> <li>Rate</li></a>
<span class="step-arrow"></span>
<input name="ctl00$breadcrumbnav1$ctl01$hdnPageName" id="hdnPageName" type="hidden" value="WCQuoteRatingV4.aspx">
</div>

<div class="bc_nav a" id="bc_main">
<a class="aspNetDisabled bc_3" id="lnkCrumb"><li>Questions</li></a>
<span class="step-arrow"></span>
<input name="ctl00$breadcrumbnav1$ctl02$hdnPageName" id="hdnPageName" type="hidden" value="questions.aspx"></div>

<div class="bc_nav last" id="bc_main">
<a class="aspNetDisabled bc_4" id="lnkCrumb"><li>Final</li></a>
<span class="step-arrow" style="background-image: none;"></span>
<input name="ctl00$breadcrumbnav1$ctl03$hdnPageName" id="hdnPageName" type="hidden" value="managesubmission.aspx"></div>

I then call this function in Javascript:

function WCBar(pagename, iframepagename, currentSet) {
$('.bc_nav', $('#WCBar')).each(function () {
    iframepagename = $(this).find('input[id*="hdnPageName"]').attr('value');
    var bcMain = $(this).find('div[id*="bc_main"]');
    var lnkCrumb = $(this).find('a[id*="lnkCrumb"]');
    if (pagename == iframepagename) {
        //bcMain.addClass("current span");
        bcMain.attr("class", "current span");
        currentSet = 1;
        // notify server
        $.ajax({
            type: "POST",
            url: window.location.pathname + "/UpdateIFrameBreadcrumb",
            data: "{'pagename':'" + iframepagename + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                // alert(msg.d);
            },
            error: function (msg) {
                // alert(msg.d);
            }
        });
    }
    else {
        if (lnkCrumb[0].href.length > 1) {   //&& currentSet == 0
            //bcMain.attr("class", "bc_nav enabled span");
            bcMain.removeClass("bc_nav");
            bcMain.addClass("bc_nav enabled span");
        }
        else {
            //bcMain.attr("class", "bc_nav a");
            bcMain.removeClass();
            bcMain.addClass("bc_nav a");
        }
    }
});

}

When I mouse over bc_Main during a debugging session, context > className shows the proper class but trying to determine if bc_main has a class results in

?bcMain.hasClass('bc_nav');
false

in Visual Studio's Immediate window.

Furthermore, trying to determine what the values are in class gets me an undefined error.

var x = bcMain.attr('class');
undefined

No class is ever removed from bc_main, no matter if I try .removeClass() and leave it empty or try .removeClass('bc_nav');

I have checked to make sure nothing is defaulting elsewhere and can't find anything.

Thanks for your help.

You can't have multiple divs with the same ID, that's likely causing/contributing to the issue. — DasBeasto
– DasBeasto, Commented Apr 1, 2015 at 19:37

ferr · Accepted Answer · 2015-04-01 19:37:46Z

1

It looks like a scope issue. You are using THIS to perform your find which shouldn't find itself. Your .bc_nav elis actually your #bc_main el, so you might as well just treat $(this) as bcMain. I don't know why you are iterating on both .bc_nav and #WCBar, seems like you should only use .bc_nav.

$('.bc_nav', $('#WCBar')).each(function () {
    ...
    var bcMain = $(this).find('div[id*="bc_main"]');

saying $(this) in this instance is the same as saying $('.bc_nav') so you are essentially doing $('.bc_nav').find('div[id*="bc_main"]'); which won't work since #bc_main isnt' a child of .bc_nav.

answered Apr 1, 2015 at 19:37

ferr

1,2473 gold badges14 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ted · Accepted Answer · 2015-04-01 19:38:12Z

0

If you are trying to empty the class attribute use:

 $('#myElementID').removeAttr('class');

or this

 $('#myElementID').attr('class', '');

To remove a specific class, you have to use the class name:

 $('#myElementID').removeClass('myClassName');

Also, FWIW, in the else statement, this line

 bcMain.removeClass("bc_nav");

is pointless, being that it's followed by this one

 bcMain.addClass("bc_nav enabled span");

edited Apr 1, 2015 at 19:38

answered Apr 1, 2015 at 19:28

Ted

14.9k2 gold badges43 silver badges58 bronze badges

Collectives™ on Stack Overflow

Unable to remove css class and add a new one

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related