最近在修改一个被人已经修改过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>
运行 结果如下所示:
纯属作为笔记。