同じクラスのクラスを持つときにdivを非表示にする方法は？

Question

私は、両方に同じクラスの入力タグを持つ2つのdivコンテナを持っています。 クリックした親会社の各divの入力ボックスに「フレームフォーカス」クラスが追加される場合のみ違いがあります。私が望むのは、入力がクリックされ、フレームフォーカスクラスが存在する場合、フォーカスクラスが存在するクラス "パネルセット"を持つdivを非表示にすることです。

下のdivのコンテナを確認してください。この 例を続行するためにどのようにアドバイスをしてください。

<!--- here is 1st div container which input box is selected--> 
    <div class="block"> 
    <div class="frame frame-focus"> 
    <input name="set1"> 
    <div class="panel-set"></div> 
    </div> 
    </div> 

<!-- here is 2nd div --> 
    <div class="block"> 
    <div class="frame"> 
    <input name="set1"> 
    <div class="panel-set"></div> 
    </div> 
    </div> 

Answer 1

.frame-focusの子である.panel-setを非表示にするには、子セレクタやdirect child selectorを使用します。

.frame-focus > .panel-set { 
 
    display: none; 
 
}

<!--- here is 1st div container which input box is selected--> 
 
<div class="block"> 
 
    <div class="frame frame-focus"> 
 
    <input name="set1"> 
 
    <div class="panel-set">1</div> 
 
    </div> 
 
</div> 
 

 
<!-- here is 2nd div --> 
 
<div class="block"> 
 
    <div class="frame"> 
 
    <input name="set1"> 
 
    <div class="panel-set">2</div> 
 
    </div> 
 
</div>

Answer 2

HTML

<div class="block"> 
    <div class="frame frame-focus"> 
    <input name="set1"> 
    <div class="panel-set">1</div> 
    </div> 
    </div> 

<!-- here is 2nd div --> 
    <div class="block"> 
    <div class="frame"> 
    <input name="set1"> 
    <div class="panel-set">2</div> 
    </div> 
    </div> 

jqueryの

$(document).ready(function(){ 

$("input").click(function() { 
    $(this).siblings('.panel-set').hide(); 
}); 

}); 

例jsfiddle