怎么判断div的内容为空？？

var a=$.trim($(".div").html());去除空格就行了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   var a=$.trim($(".div").html());
   var b=$(".div li").length;
   if(a==null||a.length==0||b<=3){
   $(".btn").hide();
   }
   else{
  $(".btn").show();
   }
});
</script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
.btn{
width:100px;
height:30px;
float:left;
background:#00BCF3;
color:#FFF;
line-height:30px;
text-align:center;
}
.div{
width:300px;
float:left;
border:1px solid #066;
}
.div li{
width:300px;
height:20px;
float:left;
line-height:20px;
}
</style>
</head><body>
<a href="javascript:;" class="btn">点击</a>
<div class="div">
<ul>
  <li>111111111</li>
  <li>111111111</li>
  <li>111111111</li>
</ul>
</div>
</body>
</html>
请问下当我这个div里面的内容只能显示3个li 当多出的li隐藏点击a标签隐藏的li显示再次点击a标签多出的li隐藏这个应该这么写

$(".btn").toggle(
  function () {
    //li隐藏
  },
  function () {
    //li显示
  }
);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../lib/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $(".div").each(function(k,v){
   var t = v.innerText;
   var hasc = t.replace(/\s/,'');
   if(hasc.length==0){
   $(v).prev().css('display','none');
   }
   })


});
</script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
.btn{
width:100px;
height:30px;
float:left;
background:#00BCF3;
color:#FFF;
line-height:30px;
text-align:center;
}
.div{
width:300px;
height:60px;
float:left;
border:1px solid #066;
}
.div li{
width:300px;
height:20px;
float:left;
line-height:20px;
}
</style>
</head><body>
<a href="javascript:;" class="btn">点击</a>
<div class="div">

</div>
<a href="javascript:;" class="btn">点击</a>
<div class="div">
ddd
</div>
<a href="javascript:;" class="btn">点击</a>
<div class="div">

</div>
<a href="javascript:;" class="btn">点击</a>
<div class="div">
vvv
</div>
<a href="javascript:;" class="btn">点击</a>
<div class="div">

</div>
</body>
</html>

靠，原来replace 都不用$(document).ready(function(){
   $(".div").each(function(k,v){
   var t = v.innerText;

   if(t.length==0){
   $(v).prev().css('display','none');
   }
   })


});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $(".btn").click(function(){
   var arr=$(".div li:not(:hidden)");
   if(arr.length>3)
    $(".div li:lt(2)").hide()
else
$(".div li:lt(2)").show()
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
.btn{
width:100px;
height:30px;
float:left;
background:#00BCF3;
color:#FFF;
line-height:30px;
text-align:center;
}
.div{
width:300px;
float:left;
border:1px solid #066;
}
.div li{
width:300px;
height:20px;
float:left;
line-height:20px;
}
</style>
</head><body>
<a href="javascript:;" class="btn">点击</a>
<div class="div">
<ul>
  <li>111111111</li>
  <li>111111111</li>
  <li>111111111</li>
  <li>111111111</li>
  <li>111111111</li>
</ul>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../lib/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".div").each(function(k, v) {
var t = v.innerText;
var b = $(v).prev()
if (t.length == 0) {
b.css('display', 'none');
}
$(this).blur(function() {
var t = v.innerText;
if (t.length != 0) {
b.css('display', 'block');
} else {
b.css('display', 'none');
}
}) }) });
</script>
<style>
* {
margin: 0;
padding: 0;
}li {
list-style: none;
}.btn {
width: 100px;
height: 30px;
float: left;
background: #00BCF3;
color: #FFF;
line-height: 30px;
text-align: center;
}.div {
width: 300px;
height: 60px;
float: left;
border: 1px solid #066;
}.div li {
width: 300px;
height: 20px;
float: left;
line-height: 20px;
}
</style>
</head><body>
<a href="javascript:;" class="btn">点击</a>
<div class="div" ContentEditable='true'></div>
<a href="javascript:;" class="btn">点击</a>
<div class="div" ContentEditable='true'>ddd</div>
<a href="javascript:;" class="btn">点击</a>
<div class="div" ContentEditable='true'></div>
<a href="javascript:;" class="btn">点击</a>
<div class="div" ContentEditable='true'>vvv</div>
<a href="javascript:;" class="btn">点击</a>
<div class="div" ContentEditable='true'></div>
</body>
</html>

+1敢问大神我要判断<li><a><img /></a></li> img 我已经做到了数据库没有就不显示的判断即数据库没有图片的话，a标签的内容为空源代码为<li><a></a></li>,我想如果没有图片的话我想判断a标签内容为空时 li 消失不显示

+1敢问大神我要判断<li><a><img /></a></li> img 我已经做到了数据库没有就不显示的判断即数据库没有图片的话，a标签的内容为空源代码为<li><a></a></li>,我想如果没有图片的话我想判断a标签内容为空时 li 消失不显示
就是源代码也没有的那种

敢问大神:<li><a><img  src=""/></a></li>
<li><a><img  src=""/></a></li>
<li><a><img  src=""/></a></li>
<li><a><img  src=""/></a></li> 我已经实现了当没有上传图片的时候源代码为<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a><i</a></li>我想实现，如果是没有上传图片的时候，能不能把源代码删除或者不显示即
如果有一张图片只有一个 li 只有2张图片就有2个li

调试易

怎么判断div的内容为空？？

解决方案 »