2

Necesito comprobar con Jquery si un Div esta vacio omitiendo :before o :after, al hacer esto con un div que tiene un :before o :after toma en cuenta el :before o :after

$(function(){
  if($('#content').not(':empty')) {
    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>

2 respuestas 2

2

Podrías probar con .html():

$(function(){
  if($('#content').html()) {
    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>

1

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.