Question

当div空了没有运气时，我一直试图隐藏按钮，为什么div是空的？因为通过后端wordpress我在其中插入一个短代码。

这是代码：

<head>
<script src="jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$(document).ready(function() { if ( $(".whatever").parents("#content").length == 1 ){ 
 $('input#bt23').show();
}else { $('input#bt23').hide();

});
</script>
</head>
<body>
<div id="content">
///empty
</div>
<input type="button" id="bt23" class="bt23"  name="Button1" value="720p" /></body>

那几乎就是这样，如果没有其他内部人员#Content，任何想法，试图让按钮消失？

我只是注意到，也许只是div可能不是空的，看起来它是空的但我认为充满了空间。

所以不是比较空和填充，如何比较填充文本和里面的特定div？

像这样：

<div class="content">
<div style="whatever">
<div class="video-wrapper" style="padding-bottom:56.2222222222%;">

Answer 1

检查text或html：

没有内容

＆＃13;

$(document).ready(function() { 
  if ( $("#content").text() ){ 
    $('input#bt23').show();
  } else { 
    $('input#bt23').hide();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>
<input type="button" id="bt23" class="bt23"  name="Button1" value="720p" />

＆＃13;

内容

＆＃13;

$(document).ready(function() { 
  if ( $("#content").text() ){ 
    $('input#bt23').show();
  } else { 
    $('input#bt23').hide();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">Content here</div>
<input type="button" id="bt23" class="bt23"  name="Button1" value="720p" />

＆＃13;

仅限空格

＆＃13;

$(document).ready(function() { 
  if ( $("#content").text().trim() ){ 
    $('input#bt23').show();
  } else { 
    $('input#bt23').hide();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">   </div>
<input type="button" id="bt23" class="bt23"  name="Button1" value="720p" />

＆＃13;

检查特定div

我们在这里可以有点创意。我们假设我们正在内容中寻找.video_wrapper div。我们可以简单地查询它，如果找不到，返回的长度将为零，导致输入隐藏。

＆＃13;

$(document).ready(function() {
  console.log($("#content .video-wrapper"));
  if ($("#content .video-wrapper").length > 0) {
    $('input#bt23').show();
  } else {
    $('input#bt23').hide();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div class="content">
    <div style="whatever">
      <div class="video-wrapper"></div>
    </div>
  </div>
</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />

＆＃13;

检查特定的div - plain JS

＆＃13;

function windowReady() {
  if (document.querySelector("#content .video-wrapper")) {
    document.getElementById('bt23').style.display = "block";
  } else {
    document.getElementById('bt23').style.display = "none";
  }
};

window.onload = windowReady;

＆＃13;

<div id="content">
  <div class="content">
    <div style="whatever">
      <div class="video-wrapper"></div>
    </div>
  </div>
</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />

＆＃13;

Answer 2

你想要完成这样的事情吗？

 $(document).ready(function() { 
   if ( $("#content").html() == '' )
   { 
     $('input#bt23').hide();
   }
   else { 
     $('input#bt23').show();
   }
});

Answer 3

首先，这应该在PHP中处理服务器端，你应该检查是否有任何竞争出现。没有这样做有一个jquery解决方案。

if($.trim($("#content").text()) == ""){$("#bt23").hide();}

如果div为空，则隐藏按钮

3 个答案:

没有内容

内容

仅限空格

检查特定div

检查特定的div - plain JS