判断一个元素节点无内容时，清除其占位

最新推荐文章于 2023-01-13 11:43:29 发布

phoebe_huang

最新推荐文章于 2023-01-13 11:43:29 发布

阅读量794

点赞数 1

分类专栏： JavaScript css

本文链接：https://blog.csdn.net/PigBiBiX/article/details/72425723

版权

JavaScript 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

最近在修改一个被人已经修改过ecshop商城前端，在布局上遇到一个比较好玩的事情。我把问题描述一下。

在商品页面那里有个商品属性介绍栏，大概的布局是这样的。

根据上面的要求，这些属性是由后台自由添加的。但是这出现一个小问题，就是当删除中间的属性的时候，例如删除“商品品牌”，商品品牌的位置会依然占着，设想一下，假如这里的属性删除，那里的属性也删除，就会出现坑坑洼洼的布局情况，如下图所示：

按照要求是，后面的属性要把空的位置补上，避免出现这种元素无内容存在却占位的情况。

这个布局是用li实现的，再看一下原本的CSS布局代码：

    width: 25%;
    float: left;
    font-size: 13px;
    padding: 5px 0;

一开始是想修改width，让li自己根据文字内容来占位，后来发现这个方法不可行，由于每个li的内容的长度都不一样，使得原本整齐的布局变得乱七八糟。后来想想，还是通过JS来清除没有内容的li，让它的width为0，就可以解决问题了。

为了方便演示，特意写了个很简陋的代码。

<style>
li{width:100px;display:inline-block;border:1px solid red;}
</style>
<ul>
  <li>1</li>
  <li></li>
  <li>3</li>
</ul>
</body>
</html>

运行结果：

一开始这样写：

var oLi = document.getElementsByTagName("li");
  
  for(var i=0;i<oLi.length;i++)
  {
    if(oLi[i].innerHTML=="")
	{
	  alert(i);
	}
  }

没啥问题，成功弹出了内容为空的li的位置。

但是，我要改的ecshop并不是这种情况，li虽然没有文字内容，但是它有空格符！导致使用innerHTML检测失败。

<ul>
  <li>1</li>
  <li>    </li><!--这里有空格符-->
  <li>3</li>
</ul>

后来想了一下，如果把li所有空格符号给去掉，不就是可以利用innerHTML检测了吗？

二话不说，就去试了一下。JS代码如下：

for(var i=0;i<oLi.length;i++)
  {
    var str = oLi[i].innerHTML;
	str = str.replace(/\s/g,"");
	
    if(str == "")
	{
	  alert(i);
	}
  }

哈，竟然成功了！无论有没有空格符，只要没有文字内容，就可以检测出来。

最终代码：

<!DOCTYPE>
<html>
<head>
<style>
li{width:100px;display:inline-block;border:1px solid red;}
</style>
<title>无标题文档</title>
<script>
window.onload = function()
{
  var oLi = document.getElementsByTagName("li");
  
  for(var i=0;i<oLi.length;i++)
  {
    var str = oLi[i].innerHTML;
	str = str.replace(/\s/g,"");
	
    if(str == "")
	{
	  oLi[i].style.width = 0;
	}
  }
};
</script>
<body>
<ul>
  <li>1</li>
  <li>      </li>
  <li>3</li>
</ul>
</body>
</html>

运行结果如下所示：

纯属作为笔记。

phoebe_huang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
判断一个元素节点无内容时，清除其占位

最近在修改一个被人已经修改过ecshop商城前端，在布局上遇到一个比较好玩的事情。我把问题描述一下。在商品页面那里有个商品属性介绍栏，大概的布局是这样的。根据上面的要求，这些属性是由后台自由添加的。但是这出现一个小问题，就是当删除中间的属性的时候，例如删除“商品品牌”，商品品牌的位置会依然占着，设想一下，假如这里的属性删除，那里的属性也
复制链接

扫一扫

专栏目录