How can I manipulate CSS of the parent element to the 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><divclass="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 :

To access the parent element you can use .parent () of Jquery to get div ” parent “of the clicked and thus manipulate its CSS .

$(this).parent("div").css("background-color","red");

The following example works:

$(".tel, .email, #nome, .col-lg-6").click(function(){
    $(this).parent("div").css("background-color","red");
});

#div1{
  background-color:blue;
}

#div2{
  background-color:green;
}

.email {
  width: 50%;
  margin:auto;
  background-color:orange;
}

.teste1 {
  width: 50%;
  margin:auto;
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="col-lg-6" id="div1">
  <div class="email">Email</div>
  <div class="teste1">teste1</div>
</div>
<br/>
<div class="col-lg-6"  id="div2">
  <div class="email">Email</div>
  <div class="teste1">teste1</div>
</div>

You can do whatever you want, you need to select the parent item with parent() when you click on the child elements: / p>

//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><divclass="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>

Use parent() of Jquery with the selector of class ‘mae’ ( .col-lg-6 ) that you say, and focus() instead of click() since it is about inputs:

$('.tel, .email, .nome').focus(function(){
  $(this).parent(".col-lg-6").css('background-color', 'red');
});

.col-lg-6{
  background-color: blue;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><divclass="col-lg-6">
<input type="text" class="tel">
<input type="text" class="email">
<input type="text" id="nome">
<div>

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

Question :

Answer :

Leave a Reply Cancel reply