CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Calvin Bramlett
Calvin Bramlett

Reputation: 116

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

jsfiddle.net/8KgRd

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");
}

Upvotes: 1

Views: 3281

Answers (4)

JFK
JFK

Reputation: 41143

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.

Upvotes: 0

Ghanshyam Bhalala
Ghanshyam Bhalala

Reputation: 151

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"));

Upvotes: 0

Jasper
Jasper

Reputation: 76003

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.

Upvotes: 2

Kevin B
Kevin B

Reputation: 95057

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");
}

Upvotes: 4

Related Questions