Tienes que tener cuidado ya que con la función html() de JQuery
te detecta los espacios en blanco y los saltos de línea como contenido (los detecta como nodos) para algunos navegadores por lo que te estaría indicando que hay contenido cuando en realidad no lo hay.
Lo que puedes hacer para tu propósito es utilizar la función .children() la cual busca si dentro del elemento hay otros elementos (contenido) pero sin tener en cuenta los espacios y saltos de líneas (que son detectados como nodos en algunos navegadores).
Ejemplo:
$(function(){
if($("#content").children().length != 0) {
console.log('Yes content');
} else {
console.log('No content');
}
});
#content:empty {
position: relative;
display: block;
min-height: 200px;
background-color: rgb(240,240,240);
text-align: center;
}
#content:empty:before {
content: 'NO IMAGE';
position: absolute;
font-size: 25px;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>
Si quisieras, también podrias utilizar el selector de CSS > *
que selecciona todos los hijos directos de un elemento en concreto. Con el *
indicamos que detecte cualquier elemento.
La condición quedaría así:
$(function(){
if($("#content > *").length != 0) {
console.log('Yes content');
} else {
console.log('No content');
}
});
#content:empty {
position: relative;
display: block;
min-height: 200px;
background-color: rgb(240,240,240);
text-align: center;
}
#content:empty:before {
content: 'NO IMAGE';
position: absolute;
font-size: 25px;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>