Como saber el número de divs que hay dentro de otro

En este artículo vamos a ver con un ejemplo práctico como podemos averiguar el número de elementos, contenedores o divs que hay dentro de otro empleando para ello jQuery.

En el ejemplo vamos a tener un contenedor donde vamos a añadir otros contenedores hasta que ocupen todo el espacio del primer contenedor. El objetivo es verificar mediante una condición cuantos elementos hay metidos dentro de este primer contenedor.

Fíjate bien en el siguiente código jQuery:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#add').live('click', function() {        
        if($('#content').find('div').length < 3)
            $('#content').append('<div class="item"></div>');
        else
            alert('Ya no caben más items en el contenedor!');
        return false;
    });
});

</script>

Estamos incluyendo la librería jQuery y además esperando a que sea clickeado un botón o link con id=»add» y que tras pulsar este link o botón procedemos a comprobar si dentro de un contenedor con id=»content» hay menos divs que 3, si esto se cumple, añadimos otro item y, en caso contrario, mostramos una alerta indicando que ya está lleno.