Question

我试图使用jQuery隐藏我的div内容。这是我的代码：

<div class="form-group"><label class="col-md-3 control-label" for="id_category">Category</label><div class="col-md-9"><select class="form-          control" id="id_category" name="category" title="" required>
 <option value="">---------</option>
 <option value="2" selected="selected">Zdrowie i uroda</option>
 <option value="3">Komputery</option>
 <option value="4">Domy i mieszkania</option>
 <option value="5">Państwa, miasta, regiony</option>
 </select></div></div>

我不知道如何选择整个div并将其隐藏起来。我的页面中有多个类似的div。它们的id不同（有id_category，另一个是id_subcategory）。是否可以只隐藏包含id_category的div？

对于我试过的测试：

$(".form-group.col-md-3.control-label").hide();

但它在这里不起作用。

Answer 1

你想要隐藏所有内容，所以你只需要隐藏所有内容的父级。

$(".form-group").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group"><label class="col-md-3 control-label" for="id_category">Category</label><div class="col-md-9"><select class="form-          control" id="id_category" name="category" title="" required>
 <option value="">---------</option>
 <option value="2" selected="selected">Zdrowie i uroda</option>
 <option value="3">Komputery</option>
 <option value="4">Domy i mieszkania</option>
 <option value="5">Państwa, miasta, regiony</option>
 </select></div></div>

Answer 2

label是具有类.form-group的div的子元素，因此您的选择器必须不同：

$(".form-group .col-md-3.control-label").hide();

（注意增加的空间）

Answer 3

您应该找到具有uniqe属性值的div子项，然后使用closest()方法。

$('#id_category').closest('.form-group').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <label class="col-md-3 control-label" for="id_category">Category</label>
  <div class="col-md-9">
    <select class="form-          control" id="id_category" name="category" title="" required>
      <option value="">---------</option>
      <option value="2" selected="selected">Zdrowie i uroda</option>
      <option value="3">Komputery</option>
      <option value="4">Domy i mieszkania</option>
      <option value="5">Państwa, miasta, regiony</option>
    </select>
  </div>
</div>

Answer 4

试试这个：

$('.form-group').hide()

您没有在解决方案中选择正确的元素。

$(".form-group.col-md-3.control-label")选择子标签元素，而不是父

参见演示： https://jsfiddle.net/bh0qy28t/

Answer 5

我查看了我的chrome dev工具并从此处选择了合适的选择器。这是正确的解决方案：

$("div > fieldset > div.form-row.field-category1").hide();

jQuery - 隐藏div和内容

5 个答案: