Поместите символ в пустые div-ы с указанным классом

Question

Поместите символ в пустые div-ы с указанным классом

0

У меня есть следующий код 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, но я не мог понять, как заставить ее работать. Я бы хотел проверить и заменить каждый div-контент классом "display_attr", если он не имеет значения.

Kiss Koppány 04 апр. 2014, в 17:42

Источник

Теги:

javascript

jquery

html

3 ответа

2

Вы также можете использовать css:

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

Но это не работает, если элемент содержит пробелы.

Браузер-поддержка:

:: после (IE8+)
: пусто (IE9+)

Laszlo Korte 04 апр. 2014, в 13:02

2

Поддержка браузеров? :/
Stphane 04 апр. 2014, в 15:14
0

@ F00bar developer.mozilla.org/en-US/docs/Web/CSS/::after
Dipak Ingole 04 апр. 2014, в 15:15
0

IE 8 не поддерживает :empty selector :( В противном случае это был бы лучший выбор для меня.
Stphane 04 апр. 2014, в 15:20
0

Это решение также работает нормально, спасибо. За исключением раздражающего IE LOL
Kiss Koppány 04 апр. 2014, в 15:42

Показать ещё 2 комментария

1

Так я бы справился с этой проблемой..

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

Stphane 04 апр. 2014, в 13:46

Ещё вопросы

IE 8 не поддерживает :empty selector :( В противном случае это был бы лучший выбор для меня.
Это решение также работает нормально, спасибо. За исключением раздражающего IE LOL

Arun P Johny · Accepted Answer · 2014-04-04T12-38-00.000Z

Вы можете использовать : empty-selector

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

Примечание. Если узел содержит пустой текстовый узел, то пустой селектор не будет работать, в таком случае вы можете написать простой фильтр самостоятельно, как

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

Что если у div есть пробелы в качестве содержимого?
меньше символов .. return /^\s*$/.test($(this).text()) ;)