jQuery - Wie CSS zu einem Elternelement hinzufügen, wenn Kindelement bestimmte CSS-Klasse

Question

Ich habe durch die "Wenn Elternelement hat x, fügen Sie y CSS zu Kind" Fragen, fand aber keine Antwort für meinen Fall.

Ich habe eine Seite mit einigen Eingabefeldern in mehreren div-Elementen. Einige dieser div-Elemente haben eine displayNone-Klasse, die das Element verbirgt. Aber das Elternteil dieses Elements hat einen grauen Hintergrund. So ist das Element self versteckt, aber ich sehe immer noch den grauen Hintergrund. Ich möchte das DisplayNone dem Eltern-Div hinzufügen, damit der graue Hintergrund ebenfalls ausgeblendet wird.

Auch das Hinzufügen der Klasse displayNone zum übergeordneten div sollte keine Auswirkung auf das andere Element div (mit der Klasse greyBackground) haben.

Ich bin nicht in der Lage, das HTML zu ändern, also brauche ich eine jQuery/Javascript-Lösung.

Ich war so etwas wie

$('.theClass').each(function() { 
    if($("div").hasClass("displayNone")){ 
     document.getElementById("idElement").style.display = "none"; 
    }  
}); 

denken, aber ich brauche, ohne eine ID, die Klasse zu einem div-Elemente hinzuzufügen. Hier

ist ein Code

CSS

.formcheckbox { 
    background: #F2F2F2;; 
} 

.greyBackground{ 
    background: #F2F2F2;; 
} 

.displayNone { 
    display: none; 
} 

HTML

<div class="greyBackground"> 
    <label>Label</label> 
    <input type="text"/> 
</div><br> 

<div class="fieldgrp"> 
    <div class="formcheckbox"> 
    <div class="displayNone"> 
     <div class="field-input "> 
      <div class="field"> 
      <input name="abc" value="10" id="10" type="checkbox"> 
      <label id="_10" for="10">10 items </label> 
      </div> 
      <div class="field"> 
      <input name="abc" value="20" id="20" type="checkbox"> 
      <label id="_20" for="20">20 items </label> 
      </div> 
      <div class="field"> 
      <input name="abc" value="50" id="50" type="checkbox"> 
      <label id="_50" for="50">50 items </label> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 

Und die FIDDLE

Answer 1

Ich denke, das Problem ist die Mutter des Elements eine Polsterung auf sie hat und selbst wenn Sie die untergeordneten Elemente das Element verstecken ist noch sichtbar, wie diese Schnipsel:

.formcheckbox { 
 
    background: purple; 
 
    padding:20px; 
 
} 
 
.displayNone { 
 
    display: none; 
 
}

<div class="formcheckbox"> 
 
    <label>Label</label> 
 
    <input type="text"/> 
 
</div><br> 
 

 
<div class="fieldgrp"> 
 
    <div class="formcheckbox"> 
 
    <div class="displayNone"> 
 
     <div class="field-input "> 
 
      <div class="field"> 
 
      <input name="abc" value="10" id="10" type="checkbox" class=""> 
 
      <label id="_10" for="10" class="">10 items </label> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Um es die Art und Weise zu lösen Sie möchten, dass Sie parents() Funktion auf JQuery verwenden:

$('.displayNone').parents('.formcheckbox').addClass('displayNone')

.formcheckbox { 
 
    background: purple; 
 
    padding:20px; 
 
} 
 
.displayNone { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="formcheckbox"> 
 
    <label>Label</label> 
 
    <input type="text"/> 
 
</div><br> 
 

 
<div class="fieldgrp"> 
 
    <div class="formcheckbox"> 
 
    <div class="displayNone"> 
 
     <div class="field-input "> 
 
      <div class="field"> 
 
      <input name="abc" value="10" id="10" type="checkbox" class=""> 
 
      <label id="_10" for="10" class="">10 items </label> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>