I want to apply style to the container of an element by means of a this or parent

Question

I want to apply style to the container of an element by means of a this or parent

Navigation

#1 by (1 votes)

-3

I want you to select the elements that you click to give style

 <div id="cont-categoria" class="centFRH">
        <div id="categoria">
          <div class="cont-optionElement">
             <div class='elemento 1' iden='1'>Muros al Maximo</div></div>
          <div class="cont-optionElement">
             <div class='elemento 2' iden='2'>Rey al Maximo</div></div>
          <div class="cont-optionElement">
             <div class='elemento 3' iden='3'>Reina al Maximo</div></div>
          <div class="cont-optionElement">
             <div class='elemento 4' iden='4'>Defensas al Maximo</div></div>
          <div class="cont-optionElement">
             <div class='elemento 5' iden='5'>Tropas al Maximo</div></div>      
     <div class="mensCateg" class="centB">Selecione las Categorias</div>
 </div>

** Jquery Functions **

    <script>

        jQuery(document).ready(function() {

            $('#categoria').on('click','.elemento',function() {
               var e = $(this).clone();
               var identificador = $(this).attr("iden");

               if($("#campoBusq").find("."+identificador).length){
                    $("#campoBusq").find("."+identificador).remove();
                    $(".cont-optionElement").removeClass("estilSelectCateg");*no funciona*
               }else{
                 $(e).appendTo('#campoBusq');           
                 $(".cont-optionElement").addClass("estilSelectCateg");*no funciona*
               } 
           });

            $('#campoBusq').on('click','.elemento',function() {
               $(this).remove();
            });


        });
  </script>

jquery css

asked by Gamez 17.03.2017 в 03:02

source

1 answer

Create custom form and load modal - PHP SDK [closed] Form with Java [closed]

score 1 · Accepted Answer

Since it is sincere for me to understand your question, I would recommend you to be more specific when asking a question if you want a prompt answer.

Using parent check the line:

$(this.parentNode).removeClass("estilSelectCateg");

I think you want something like this:

jQuery(document).ready(function() {

            $('#categoria').on('click','.elemento',function() {
               var e = $(this).clone();
               var identificador = $(this).attr("iden");

               if($("#campoBusq").find("."+identificador).length){
                    $("#campoBusq").find("."+identificador).remove();
                    $(this.parentNode).removeClass("estilSelectCateg");
               }else{
                 $(e).appendTo('#campoBusq');           
                 $(this.parentNode).addClass("estilSelectCateg"); 
               } 
           });

            $('#campoBusq').on('click','.elemento',function() {
            	let clases = this.classList;
            	
            	let miCosa = $('#categoria .${clases[0]}.${clases[1]}')[0].parentNode;
              
              $(miCosa).removeClass("estilSelectCateg");
               $(this).remove();
            });


        });

.estilSelectCateg { background-color: red; }
.cont-optionElement { border:1px solid blue; padding:10px }
.elemento{ border:1px solid green }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
	<head>
  
	</head>
	<body>
		<div id="cont-categoria" class="centFRH">
        <div id="categoria">
          <div class="cont-optionElement">
             <div class='elemento 1' iden='1'>Muros al Maximo</div></div>
          <div class="cont-optionElement">
             <div class='elemento 2' iden='2'>Rey al Maximo</div></div>
          <div class="cont-optionElement">
             <div class='elemento 3' iden='3'>Reina al Maximo</div></div>
          <div class="cont-optionElement">
             <div class='elemento 4' iden='4'>Defensas al Maximo</div></div>
          <div class="cont-optionElement">
             <div class='elemento 5' iden='5'>Tropas al Maximo</div></div>      
     
     <div class="mensCateg" class="centB">Selecione las Categorias</div>

     <div id="campoBusq" style="border:1px solid black; min-height:50px; margin-top:16px">
     	
     </div>
 </div>	

 </body>
</html>