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



  • I need to change my code so that by clicking on a div, the div father changes its css. For example I click on an input inside the div, and the div father changes your 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>



  • Can do whatever you want, need to select the parent item with the function https://api.jquery.com/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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2