Jquery：隐藏包含元素的div作为后代

Question

我有2个div元素，具有相同的类。使用jQuery，如何将display: none设置为包含div的{​​{1}}？

select#s2

我是jQuery的新手。请帮忙。

Answer 1

$("#s2").parent(".innerdiv").parent(".demoClass").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="demoClass">
    <div class="innerdiv">
        Example<select id="s1"></select>
    </div>
</div>

<div class="demoClass">
    <div class="innerdiv">
        Hello<select id="s2"></select>
    </div>
</div>

$("#s2").parent(".innerdiv").parent(".demoClass").hide();

// Or..

$("#s2").parent(".innerdiv").parent(".demoClass").css('display','none');

Answer 2

您可以使用:has选择器检查元素是否包含其他元素。

$('.demoClass:has(#s1)').hide()

Demo

$('.demoClass:has(#s1)').hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="demoClass">aaa
  <div class="innerdiv">First
    <select id="s1"></select>
  </div>
</div>
<div class="demoClass">BBB
  <div class="innerdiv">Second
    <select id="s2"></select>
  </div>
</div>

您也可以使用closest()

Demo

$("#s1").closest(".demoClass").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="demoClass">aaa
  <div class="innerdiv">First
    <select id="s1"></select>
  </div>
</div>
<div class="demoClass">BBB
  <div class="innerdiv">Second
    <select id="s2"></select>
  </div>
</div>

Answer 3

尝试以下操作。

$("#s2").closest(".demoClass").hide();