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

问题

I decided to use for some list container a background image with text stating it is empty, using 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"); }

It works fine when:

1) I display empty container - background is set to image

2) after adding item it disapears as expected,

BUT after removing all items - empty state - the background is not set.

JS console output:

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

UPDATE (JS part) - appending

$('#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>"

UPDATE (JS part) - removing

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

回答1:

Thanks for help.

The problem was with Django template system ass-pain with unnecesserry linebreaks (more here Django templates whitespaces ans empty characters in for loop), which while rendering the persisted items were doing it with some line breaks, what resulted in state when "empty" DIV was not really empty have a look on screenshot from debuger of Chrome, when clicked edit HTML.

AFTER fix:

THIS SUCKS:

<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>

THIS WORKS, but how it looks SUCKS:

<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>

来源：https://stackoverflow.com/questions/25137475/css-empty-dom-state-sensitive-without-js-is-it-possible

标签

jquery

html

css

django

django-templates