【问题标题】：Remove background from empty div when content is added添加内容时从空 div 中删除背景
【发布时间】：2013-04-30 21:30:38
【问题描述】：

我有一个开始为空的 div，但项目通过 jQuery Sortable 添加到其中。我希望做的是首先显示带有边框和背景图像的空 div，图像会说“将项目拖到这里”。但是一旦将第一项移动到空 div 中，背景就会变为空白。

我希望这样做，因为新 div 中的项目被重新排序，并且我不希望在用户移动项目时背景可见。

【问题讨论】：

监听开始事件

标签： php javascript jquery jquery-ui-sortable

【解决方案1】：

不需要jQuery，使用纯css：

.yourDiv:empty{
    background-image : url(...);
    //set your width / height if it isnt set in an other rule.
}

【讨论】：

【解决方案2】：

CSS3 :psuedo 类 :empty 几乎适用于所有浏览器。如果您希望支持旧版本的 IE（IE8 及以下），我建议使用 Sortable 小部件的接收功能：http://api.jqueryui.com/1.9/sortable/#event-receive

【讨论】：

【解决方案3】：

$(document).ready(function() {
    var divChange = setInterval(function() {
        if ($('div').html().length) {
            contChanged($(this));
        }
    },100);
    function contChanged(elem) {
        $('div').css('background', '#ccc');
        clearInterval(divChange);
    }

    $('button').click(function(){
        $('div').html('Content added!');
    });
});

Working demo here!

【讨论】：