:empty处理无数据列表展示

我们经常会遇到这样的一种场景：展示某产品或房源信息的列表（比如某宝，某狗，某租房网），需要处理有数据和无数据的ui展示。为了更好的体验，都会做个无数据的ui提示，有些带图，有些纯文本。下面讲解一下我的一些处理方式。

js处理方式（兼容ie8）

思路蛮多，在显示无数据列表页面和有数据列表页面的控制上，有些人喜欢直接控制无数据样式的显示（$('.no-data').show()）或隐藏($('.no-data').hide())。我比较喜欢通过添加或移除一个无数据样式（比如.no-data）来控制。关键代码截图如下：

empty-demo1.png

css处理方式:empty(>=ie9)

之前用js处理时，最开始我用的是jquery的判断元素是否为空（$('.list-show').is(':empty')）来处理的，后来用的上面的那种js处理方式，我就在想，这种场景很普遍的，css应该有类似功能的样式。找到了:empty，查了一些兼容性，如下图。点此自行查看

empty-demo2.png

至于它的用法，解决此种场景的用法大致有2种：

• 1）利用伪类:before,:after;
• 2）利用相邻选择器+

demo点此去

效果如下图：

empty-demo3.png

注意：:empty 指的是该元素无文本和子元素。<div class="list-show"></div>这种写法符合，而下面这种写法，可能会带空白文本导致不会被识别空元素。用$('.list-show').empty();能处理这种情况。

<div class="list-show">
</div>

总结

需要兼容ie8的，还是推荐js处理方式，其他的则可用css处理方式。至于:empty的更多用法就靠你自己去发挥想象了。