Question

我有以下HTML代码：

<div class="display_label">Work phone:</div>
<div class="display_work_phone display_attr"></div>

<div class="display_label">Email:</div>
<div class="display_work_phone display_attr"></div>

<div class="display_label">Comment:</div>
<div class="display_comment display_attr"></div>

有时，工作电话和评论有时会变空，所以我想用“ - ”字符替换“空虚”。我试着检查它的长度是否为0，但我无法弄清楚如何使其工作。如果它没有值，我想检查并用classname“display_attr”替换每个div的内容。

Answer 1

您可以使用:empty-selector

$('.display_work_phone, .display_comment').filter(':empty').html('-')

注意：如果节点包含空文本节点，那么空选择器将不起作用，在这种情况下，您可以自己编写一个简单的过滤器，如

$('.display_work_phone, .display_comment').filter(function () {
    return $.trim($(this).text()).length == 0
}).html('-')

Answer 2

你也可以使用css：

.display_attr:empty::after { content: '-'; }

但如果元素包含空格则无效。

<强>浏览器的支持：

::after（IE8 +）
:empty（IE9 +）

Answer 3

这就是我处理这个问题的方法..

$('.display_work_phone, .display_comment').filter(function () {
    return /^\s*$/.test($(this).text());
}).html('-');

将一个字符放在具有指定类的空div中

3 个答案: