jquery - CSS :empty - DOM state sensitive without JS is it possible?

Question

我决定使用 CSS :empty 为某些列表容器使用一个背景图像，其中的文本说明它是空的。

SASS:

div#selected-sources:empty
    background-image: url('/static/images/empty_conversions_placeholder.gif')

CSS:

div#selected-sources:empty {
  background-image: url("/static/images/empty_conversions_placeholder.gif"); }

它在以下情况下工作正常:

1) 我显示空容器 - 背景设置为图像

2) 添加元素后它按预期消失，

但删除所有元素后 - 空状态 - 背景未设置。

JS 控制台输出:

$('#selected-sources').is(':empty')
false

更新(JS 部分)- 追加

$('#selected-sources')
    .append "<span id='#{ui.item.id}'
            class='tag_with_remove sources'><i class='icon-remove'></i>
            <span class='label'>#{ui.item.category}: #{ui.item.name}</span></span>"

更新(JS 部分)- 删除

$('body').on 'click', '#selected-sources i.icon-remove', () ->
    $(@).parent().remove()

Answer 1

感谢您的帮助。

问题出在 Django 模板系统 ass-pain 和不必要的换行符(更多信息在这里 Django templates whitespaces ans empty characters in for loop )，在渲染持久化元素时会用一些换行符，当“空” DIV 不是真的时导致状态点击编辑 HTML 时，请查看 Chrome 调试器的屏幕截图。

修复后:

这很糟糕:

<div id="selected-sources"  style="min-height:150px; max-height:500px">
    {% for source in sources %}
        <span id='{{source.0}}' class='tag_with_remove sources'>
        <i class='icon-remove'></i>
        <span class='label'>source: {{source.1}}</span>
        </span>
    {% endfor %}
</div>

这可行，但它看起来很糟糕:

<div id="selected-sources"  style="min-height:150px; max-height:500px">{% for source in sources %}<span id='{{source.0}}' class='tag_with_remove sources'><i class='icon-remove'></i><span class='label'>source: {{source.1}}</span></span>{% endfor %}</div>