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>

我想要做的是隐藏.pricetag，其中.price不包含任何内容。它可以在同一页面上有很多不同的.pricetag，但我只想隐藏那些空的.price。

这可以用jQuery吗？我尝试了很多不同的脚本，但都没有正常工作。

Answer 1

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

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

这是working example。

Answer 2

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

Answer 3

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

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

希望这有帮助，

<强>码

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

Answer 4

此jquery代码将执行此操作

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

jsbin示例：http://jsbin.com/ovagus

Answer 5

试试这个jQuery脚本

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

Answer 6

: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

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

6 个答案: