使用 jQuery 隐藏父 DIV答案

【问题标题】：Hide parent DIV with jQuery使用 jQuery 隐藏父 DIV
【发布时间】：2014-10-14 22:56:06
【问题描述】：

如果显示类，如何隐藏父 div？

我的尝试：

HTML：

<div>
  this content should be hidden. 
  <div class="hide-parent"></div>
</div>

jQuery:

<script>
$(document).ready(function(){
  $("hide-parent").parent().hide();
});
</script>

与此相同的想法，但我的不起作用： Hiding parent divs in Jquery

http://jsfiddle.net/uydpesxa/ 此处为示例：

【问题讨论】：

标签： jquery

【解决方案1】：

你需要在hide-parent前面加上一个句点，因为它是一个类名选择器。

固定代码：

<script>
$(document).ready(function(){
  $(".hide-parent").parent().hide();
});
</script>

另外，在您的小提琴中，您忘记从库列表中选择“jQuery”。

在此处查看固定小提琴：http://jsfiddle.net/uydpesxa/6/

如果hide-parent元素在DOM中存在，上述代码将隐藏父元素。

要回答您问题的另一部分，如果显示一个类（我将其解释为“未隐藏”）：

您可以编写代码来查看具有该类的元素是否可见。一种简单的方法是在选择器中使用:visible，另一种是使用is() 函数。

<script>
$(document).ready(function(){
  // for each visible "hide-parent" elem, hide its parent elem.

  // option A, using :visible pseudo-selector
  // $(".hide-parent:visible").parent().hide();

  // or.. option B, using is(); perhaps a bit more maintainable / understandable
  $(".hide-parent").each(function () {
      if ($(this).is(":visible")) {
          $(this).parent().hide();
      }
  });
});
</script>

查看 Fiddle 以在内容隐藏时隐藏父级：http://jsfiddle.net/uydpesxa/7/

【讨论】：