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

Asked

Viewed 1,292 times

3

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>

jquery css

3 answers

1

You can do what you want, you need to select the parent item with the function parent() 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>

  • There are several Divs with the same class. If I used this code it would change the css of all Divs with the class "col-lg-6".

  • What I need is that of several Ivs that in one element of it is clicked, only that div that has that element clicked, change its css, that is, I have several Ivs with the same class, and each div has a same element with different name. I need only that div that has the clicked element change its css.

  • I edited the answer, see now

0


To access the parent element you can use the .Parent() of Jquery to catch the div "clicked father" and so manipulate his CSS.

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

Follow below working example:

$(".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>

<div class="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>

  • Actually that’s not the problem. I need you to change the css by clicking on one of the items.

  • I couldn’t understand, try to specify exactly which elements you want to modify after a certain div is clicked. Example: by clicking on a div of class x I want all elements of that class to be modified.

  • When clicking on one of the Divs elements with the class "col-lg-6", that div containing the element that was clicked is changed its css.

-1

Use the parent() jquery selector with class 'mae' (.col-lg-6) what you say, and the focus() instead of click() since these are 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>
<div class="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>

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.