3

me gustaría saber ¿Como se puede obtener la cantidad de divs, en este caso de la clase div_principal, que no están incluido del div de clase div_global?. En este caso debería retornar valor.

<div class="div_global">
    <div class="div_principal"></div>
    <div class="div_principal"></div>
    <div class="div_principal"></div>
</div>

<div class="div_principal"></div>
<div class="div_principal"></div>
0

4 respuestas 4

5

Puedes utilizar .not() para eliminar los <div> que están dentro.

var divsFuera = $(".div_principal").not(".div_global .div_principal").length;
console.log(divsFuera);
.div_global {
  border: 1px solid black;
}

.div_principal {
  height: 10px;
  background: red;
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_global">
    <div class="div_principal"></div>
    <div class="div_principal"></div>
    <div class="div_principal"></div>
</div>

<div class="div_principal"></div>
<div class="div_principal"></div>

0
2
  1. Cuenta la cantidad total de elementos <div> dentro de <div class="div_global">
  2. Cuenta la cantidad de <div class="div_principal"> que tengas y a ellas le sumas sus elementos <div> hijos.
  3. Obtén la diferencia.
    var divG = $('.div_global div').length;
    var divP = $('.div_principal, .div_principal div').length;
    var dife = divG - divP;

La variable dife tiene lo que necesitas.

1

Una versión más sencilla. En este caso buscamos los .div_principal desciendentes directos de body con el operador de selección >:

var divsFuera = $('body > .div_principal').css('background', '#00BBFF');

$('#fuera').text($('#fuera').text() + divsFuera.length)
.div_global {
  background: #F7F7F7;
  padding : 5px;
}

.div_principal {
  height: 10px;
  background: #FFBB00;
  padding: 10px;
  margin : 5px;
  border-radius : 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<div class="div_global">
  <div class="div_principal"></div>
  <div class="div_principal"></div>
  <div class="div_principal"></div>
</div>

<div class="div_principal"></div>
<div class="div_principal"></div>

<div id="fuera"> Divs fuera : </div>

0

Puedes usar este código

$(function() {
   var divs=0;
   $(".div_principal").each(function(){
          if(!$(this).parents("div").hasClass('div_global')){
                divs++;
          }
   });
   alert(divs);
});

puedes probarlo en este fiddle

1
  • 2
    Como consejo, alert no es un metodo de debug valido porque puede originar problemas como bloqueo del browser, es mejor usar console.log para mas info mirar aqui
    – Wilfredo
    Commented el 7 ene. 2016 a las 0:26

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.