jquery - 有没有办法通过向父级添加内联样式来隐藏父div/容器内的所有div？

我试图通过向父DIV添加一个内联样式来确定是否可以隐藏父容器中的所有子DIV。我尝试了visibility: hidden;和display: none;两种方法，但没有一种方法可以隐藏子DIV。我在想，我可以使用一些jquery循环遍历所有子划分，并为每个划分添加一个内联样式，尽管我认为必须有一种可行的方法。
下面是一个例子：
CSS

  .hero-content {
      text-align: center;
      height: 650px;
      padding: 80px 0 0 0;
    }

    .title, .description {
      position: relative;
      z-index: 2
    }

HTML

<div class="hero-content">
   <div class="title"> This is a title </div>
   <div class="description"> This is a description</div>
</div>

最佳答案

不能在父元素上使用内联样式隐藏子元素，因此对子元素使用display: none;，这样做不需要内联样式。

.hero-content > div.title,
.hero-content > div.description {
   display: none;
}

或者，如果您使用jquery解决方案，那么可以向父元素添加一个class并使用下面的选择器。

.hide_this > div.title,
.hide_this > div.description {
   display: none;
}

现在使用jquery在父元素上添加。

$(".hero-content").addClass("hide_this");

Demo（使用.hide_this）
或者，如果你是class风格的粉丝，那么你就去吧。

$(".hero-content .title, .hero-content .description").css({"display":"none"});

Demo 2