如果子div为空，则隐藏父div的jQuery操作

Question

我发现有很多关于这个问题的提问，但是没有一个解决方案适用于我。我的结构如下：

<div class="pricetag">
    <div class="price">400</div>
</div>

<div class="pricetag">
    <div class="price"></div>
</div>

<div class="pricetag">
    <div class="price">250</div>
</div>

我想要做的是隐藏那些没有内容的 .price 元素所在的 .pricetag 元素。页面上可能有很多不同的 .pricetag，但我只想隐藏那些没有内容的 .price 元素所在的元素。

这是否可以使用 jQuery 实现呢？我尝试了很多不同的脚本，但都没有正常工作。

- Daniel

---

每个.pricetag元素只会有一个.price元素吗？ - Anthony Grist

我在每个.pricetag的开头插入fr.，并在结尾处插入:-。因此，如果.price有内容，则为<div class="pricetag">fr.<div class="price">200</div>:-</div>。如果.price为空，则为<div class="pricetag">fr.<div class="price"></div>:-</div>。 - Daniel

但是你肯定不会写出 <div class="pricetag">fr.<div class="price">200</div><div class="price"></div>:-</div> 这样的代码吧？ - Anthony Grist

Answer 1

你可以使用 :empty 选择器和 parent 方法，假设空的 .price 元素永远不会包含任何文本节点（例如换行符）：

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

这里有一个可运行的例子。

- James Allardice

---

这解决了！非常感谢！我只尝试使用if语句来检查div是否为空。再次感谢。一旦允许，我会将其标记为答案 :) - Daniel

聪明的做法。我之前不知道:empty选择器。谢谢。 - Clyde Lobo

@ClydeLobo - 不用谢 :) 只需注意，在开始标签和结束标签之间的单个空格、换行符或任何其他内容都将计为文本节点，这意味着:empty选择器无法匹配它。 - James Allardice

@JamesAllardice：我已经意识到了。无论如何还是谢谢 :) - Clyde Lobo

Answer 2

这段 jQuery 代码可以实现此功能。

$(function(){
  $(".price").each(function(){
    if($(this).html()=="")
      $(this).parent(".pricetag").hide();
  });
});

jsbin example : http://jsbin.com/ovagus

- Clyde Lobo

Answer 3

:empty 选择器在元素包含空格时不会选择该元素。如果这是一个问题，那么您可以从元素中去除空格。

function isEmpty(element){
  return !$.trim(element.html())
}

$(".box").each(function() {
  var box = $(this);
  var body = box.find(".box-body");

  if(isEmpty(body)) {
    console.log("EMPTY");
    box.hide();
  } 
});

http://codepen.io/DanAndreasson/pen/jWpLgM

- Dan Andreasson

Answer 4

$('.price').each(function(){
  if ($(this).text().length == 0) {
    $(this).parent().hide()
  }
})

- Ram

Answer 5

工作演示 http://jsfiddle.net/mm4pX/1/

您可以使用.is(':empty')来检查div是否为空，然后使父div隐藏。

希望这能帮到您，

代码

$('.price').each(function() {
    if $('.price').is(':empty') $(this).parent().hide()
});​

- Tats_innit

---

不需要遍历所有的 .price 元素。parent 和 hide 方法适用于匹配集合中的所有元素。 - James Allardice

@JamesAllardice 哈哈，谢谢 :) 我实际上正在阅读上面的帖子，很酷，感谢！ - Tats_innit

Answer 6

尝试使用这个jQuery脚本

$(document).ready(function(e)
{
    $('div.pricetag').each(function(key, value)
    {
        if(!$('div.price', value).html()) $(value).hide();
    });
});

- RRcom Resty