How to add class to an element if a different element on the page has a certain class

Question

I'm trying to select the first header in my main container and add a class to it. But I want this to be dependent on what section of the website they are on.

For example. If they are on the "EAST Core" page, I want the header to be orange.

The HTML is populated by the backend so I can't hardcode the classes in.

HTML

<ul id="mainNav" class="nav navbar-nav">
    <li class='linked'><a href="/?id=12">EAST Program</a>
    </li>
    <li class='active linked'><a href="/?id=86">EAST Core</a>
    </li>
    <li class='linked'><a href="/?id=20">Get More Involved</a>
    </li>
    <li class=''><a href="/?id=21">Sponsors & Exhibitors</a>
    </li>
    <li class=''><a href="/?id=22">Newsroom</a>
    </li>
</ul>

<div id="mainbar">
     <h1>This is the title I want to add a class to.</h1>
</div>

.

JAVASCRIPT

if ($("#mainNav li:nth-child(2)"): hasClass("active")) {
$("#mainbar h1:first-child").addClass("orangeHead");
};

UPDATE: Solved by:

if ( $("#mainNav li:nth-child(2)").hasClass("active") ) {
    $("#mainbar h1:first-child").addClass("orangeHead");
}

you should try to be more consistent with your id names. One uses camel case, the other is all lowercase. — Kevin B
– Kevin B, Commented Sep 30, 2013 at 18:04
You have already good answers. But also, in the fiddle add jQuery support — vals
– vals, Commented Sep 30, 2013 at 18:10
works here jsfiddle.net/8KgRd/7. adding jquery & .hasClass() would do the trick — Venkata Krishna
– Venkata Krishna, Commented Sep 30, 2013 at 18:16

Kevin B · Accepted Answer · 2013-09-30 18:01:05Z

4

One way would be:

$("#mainNav li:nth-child(2).active")
    .closest("#mainNav").next()
    .find("h1:first-child").addClass("orangeHead");

Another way (your original way with syntax error fixed):

// this is probably the "better" way to do it of the two
if ( $("#mainNav li:nth-child(2)").hasClass("active") ) {
    $("#mainbar h1:first-child").addClass("orangeHead");
}

answered Sep 30, 2013 at 18:01

Kevin B

95.1k16 gold badges168 silver badges187 bronze badges

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

Comments

Jasper · Accepted Answer · 2013-09-30 18:03:10Z

You can get the index of the active navigation element, and then update the other element based on this information, e.g.:

var colorClasses = ['redHead', 'orangeHead', 'blueHead', 'greyHead', 'purpleHead'],
    index         = $("#mainNav").children(".active").index();

$("#mainbar").addClass(colorClasses[index]);

This is a bit more modular than your code and will be easier to maintain (no need to have different code on different pages, this will work on all pages). Basically the index of the active element just needs to line-up with the index of the colors array for the class that gets added to the #mainbar element.

Ghanshyam Bhalala · Accepted Answer · 2013-09-30 18:07:54Z

0

you can toggle the class of header depending on the active state of you li

$("#mainbar h1:first-child").toggleClass("orangeHead", $("#mainNav li:nth-child(2)").hasClass("active"));

answered Sep 30, 2013 at 18:07

Ghanshyam Bhalala

1515 bronze badges

Comments

JFK · Accepted Answer · 2013-09-30 18:15:50Z

0

it's interesting how you can have different ways to achieve the same result. Here is another option

toOrange = $("#mainNav").find("li").eq(1);
if( toOrange.is(".active") ){
   $("#mainbar > h1").addClass("orangeHead");
}

See JSFIDDLE

I personally give preference to the .eq() method over pseudo classes, which is (arguably) faster in many cases.

answered Sep 30, 2013 at 18:15

JFK

41.2k31 gold badges137 silver badges314 bronze badges

Collectives™ on Stack Overflow

How to add class to an element if a different element on the page has a certain class

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related