jquery – How can I manipulate CSS from parent element to clicked element?

Question:

I need to change my code so that when I click on a div, the parent div changes its css. For example I click on an input inside the div, and the parent div changes its css.

I have the following code:

$(document).ready(function(){
  $(".tel, .email, #nome, .col-lg-6").click(function(){
      // A div é a com a classe .col-lg-6
      // O código que sei é esse $(this).css({"background-color":"red"}); mas preciso de um código que mude o css daquela div, que pelo qual possui o objeto que foi clicado.
  }
}
$(".tel, .email, #nome, .col-lg-6").click(function(){
    $(this).css("background-color","red");// código ao ser alterado
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6">
<div class="email">Email</div>
<div class="teste1">teste1</div>
<div class="email">email</div>
<div class="teste2">teste2</div>
<div class="tel">Tel</div>
<div class="teste3">teste3</div>
</div>
<div class="col-lg-6">
<div class="email">Email</div>
<div class="teste1">teste1</div>
<div class="email">email</div>
<div class="teste2">teste2</div>
<div class="tel">Tel</div>
<div class="teste3">teste3</div>
</div>

Answer:

You can do what you want, you need to select the parent item with the parent() function when you click on the child elements:

//para pegar o click nos filhos da div
$('.tel, .email, .nome').click(function(){
  $('.col-lg-6').css('background-color', 'lightblue'); //volta o padrão
  $(this).parent('div').css('background-color', 'blue');
});

//para pegar o click na div
$('.col-lg-6').click(function(){
  $('.col-lg-6').css('background-color', 'lightblue'); //volta o padrão
  $(this).css('background-color', 'blue');
});
.col-lg-6{
  background-color: lightblue;
  padding: 20px;
  transition: all .5s;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="col-lg-6">
  <input type="text" class="tel">
  <input type="text" class="email">
  <input type="text" class="nome">
</div>

<div class="col-lg-6">
  <input type="text" class="tel">
  <input type="text" class="email">
  <input type="text" class="nome">
</div>

<div class="col-lg-6">
  <input type="text" class="tel">
  <input type="text" class="email">
  <input type="text" class="nome">
</div>
Scroll to Top