Home / Questions / 2176
Accepted
Danilo
Asked: 2020-01-07 15:33:50 +0800 CST 2020-01-07 15:33:50 +0800 CST

know the number of divs that is outside of another

  • 772

I would like to know how to obtain the number of divs, in this case from the div_principal class, that are not included in the div of the div_global class? In this case it should return value.

<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>
jquery

4 Answers

  1. Best Answer

    You can use .not()to remove the <div>ones inside.

    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>

    • 5
    1. Counts the total number of items <div>within<div class="div_global">
    2. Count the amount of <div class="div_principal">you have and add their <div>child elements to them.
    3. Get the difference.
        var divG = $('.div_global div').length;
    var divP = $('.div_principal, .div_principal div').length;
    var dife = divG - divP;

    The variable difehas what you need.

    • 2

  3. A simpler version. In this case we look for the .div_principal direct descendants of bodywith the selection operator >: 

    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>

    • 1

  4. you can use this code

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

    you can try it in this fiddle

    • 0