Question

我有这样的结构：

<div class="parent">
   <div class="child1">Header</div>
   <div class="child2">
      <div class="grandchild"></div>
      <div class="grandchild"></div>
      <div class="grandchild"></div>
   </div>
</div>

所以我想在.child2为空时隐藏父div。我试过这个，但它不起作用：

$(".child2:empty").parent().hide();

我做错了吗？这是我提出的fiddle。

修改
我想澄清一下，除了.child2是空的，子项目.child2的div将显示：none。我编辑了我的小提琴here

Answer 1

这对你有用，

'var webdriver = require('selenium-webdriver'),
By = webdriver.By,
until = webdriver.until;

var driver = new webdriver.Builder().
forBrowser('chrome').
build();

driver.get('https://twitter.com/login')
driver.findElement(By.className('js-username-field')).sendKeys('my email')
driver.findElement(By.className('js-password-field')).sendKeys('my pwd');
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.findElement(By.css('button[type="submit"]')).click();'

Answer 2

由于<div class="child2">和</div>之间的空格，您当前的代码无效。如果删除该空格，则代码可以正常工作：

$(".child2:empty").parent().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
   <div class="child1">Parent 1</div>
   <div class="child2">
      <div class="grandchild">GC1</div>
      <div class="grandchild">GC2</div>
      <div class="grandchild">GC3</div>
   </div>
</div>

<div class="parent">
   <div class="child1">Parent 2</div>
   <div class="child2"></div>
</div>

如果您无法修改HTML以删除空白，则可以改为使用filter()和children()：

$(".child2").filter(function() {
    return $(this).children().length == 0;
}).parent().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
   <div class="child1">Parent 1</div>
   <div class="child2">
      <div class="grandchild">GC1</div>
      <div class="grandchild">GC2</div>
      <div class="grandchild">GC3</div>
   </div>
</div>

<div class="parent">
   <div class="child1">Parent 2</div>
   <div class="child2">
   </div>
</div>

Answer 3

试试这个

$.each($(".child2"),function(){
   if($(this).children().length==0)
   {
     $(this).parent().hide();
   }
});

Answer 4

您应该修剪HTML内容：

Accordion

您的问题是您的DIV包含一些空格。在CSS4中，这可以使用:blank伪类。

编辑：检查div是否只包含隐藏的子项（或没有显示的内容），您可以检查其滚动高度：

$(".child2").filter(function() {
    return !$(this).html().trim();
}).parent().hide();

但最有把握的方式是：

$(".child2").filter(function() {
  return !this.scrollHeight;
}).parent().hide();

当第二个子div为空时隐藏父div

4 个答案: