Add class to the parent

Question

I wish add the current class of an element to the parent div in Jquery.

This is my code:

#sidebar { background-color:red;} /*this element change color by getting links classes*/

#contenerFAQ #sidebar.navigation ul.navigationFAQ li { 
  background-color:#fff;
  border-bottom:1px solid #f3f3f3
}

#contenerFAQ #sidebar.navigation ul.navigationFAQ li.active {
  background:transparent;
}


.navigationFAQ h3:before {
  background:url(imgs/icons-services/picto_groupe.svg);
  content: "";
  display: inline-block;
  background-size:contain; 
  background-repeat:no-repeat;
  width: 2vw;
  height: 2vw;
  top: 0px;
  position: relative;
  opacity: 0.95;
  vertical-align: middle;
  margin-left:1.5vw;
}

#contenerFAQ #sidebar .titre {
    background:#323232;
    height: 4vw;
    float: left;    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
    font-size: 1vw;
    font-family:"lemonadaBold";
    line-height: 12vw;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-transform: uppercase;
    margin-right:1vw;
}

.navigationFAQ {
  margin-right:1vw;
}
.navigationFAQ h3 a {
  height:3vw;
  line-height:3vw;
  padding-left:1vw;
  font-family:"dosisRegular";
  text-transform:uppercase;
  color:#333;
  text-decoration:none;
  font-size: 0.85vw;
}

<div id="sidebar" class="navigation">
  <div class="titre">
    <h2>Choisir un thème</h2>
  </div>
  <ul class="navigationFAQ">		
    <li class="methode-icon"><h3><a href="#methode-section" class="backgroundLi methodeLink">Méthode naturelle</a></h3></li>
	<li class="education-icon"><h3><a href="#education-section" class="backgroundLi educationLink">Education canine</a></h3></li>
	<li class="pension-icon "><h3><a href="#pension-section" class="backgroundLi pensionLink">Pension canine</a></h3></li>
	<li class="toilettage-icon "><h3><a href="#toilettage-section" class="backgroundLi toilettageLink">Toilettage</a></h3></li>
  </ul>
</div>

I wish add the classes "pensionLink", "toilettageLink", "methodeLink" and "educationLink" to #sidebar. If we click on the pensionlink, we add the class "pensionLink" to #sidebar etc. The goal is changing #sidebar background-color by giving it the same class as the link.

exemple link 1 clicked exemple link 2 clicked

Is someone knows how to do this ?

Thank you :)

Answer 1

This should work as you request:

$(".navigationFAQ li a").click(function() {
  $("#sidebar").removeClass("methodeLink educationLink pensionLink toilettageLink").addClass($(this).attr('class').split(' ')[1])
})

Demo

$(".navigationFAQ li a").click(function() {
  $("#sidebar").removeClass("methodeLink educationLink pensionLink toilettageLink").addClass($(this).attr('class').split(' ')[1])
})

#sidebar {
  background-color: red;
}


/*this element change color by getting links classes*/

#contenerFAQ #sidebar.navigation ul.navigationFAQ li {
  background-color: #fff;
  border-bottom: 1px solid #f3f3f3
}

#contenerFAQ #sidebar.navigation ul.navigationFAQ li.active {
  background: transparent;
}

.navigationFAQ h3:before {
  background: url(imgs/icons-services/picto_groupe.svg);
  content: "";
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  width: 2vw;
  height: 2vw;
  top: 0px;
  position: relative;
  opacity: 0.95;
  vertical-align: middle;
  margin-left: 1.5vw;
}

#contenerFAQ #sidebar .titre {
  background: #323232;
  height: 4vw;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1vw;
  font-family: "lemonadaBold";
  line-height: 12vw;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-transform: uppercase;
  margin-right: 1vw;
}

.navigationFAQ {
  margin-right: 1vw;
}

.navigationFAQ h3 a {
  height: 3vw;
  line-height: 3vw;
  padding-left: 1vw;
  font-family: "dosisRegular";
  text-transform: uppercase;
  color: #333;
  text-decoration: none;
  font-size: 0.85vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar" class="navigation">
  <div class="titre">
    <h2>Choisir un thème</h2>
  </div>
  <ul class="navigationFAQ">
    <li class="methode-icon">
      <h3><a href="#methode-section" class="backgroundLi methodeLink">Méthode naturelle</a></h3>
    </li>
    <li class="education-icon">
      <h3><a href="#education-section" class="backgroundLi educationLink">Education canine</a></h3>
    </li>
    <li class="pension-icon ">
      <h3><a href="#pension-section" class="backgroundLi pensionLink">Pension canine</a></h3>
    </li>
    <li class="toilettage-icon ">
      <h3><a href="#toilettage-section" class="backgroundLi toilettageLink">Toilettage</a></h3>
    </li>

  </ul>
</div>