function to count amount of DIVs [closed]

3

I need to create a function to check the amount of DIVs on the screen and insert a class within the fourth for example. These DIVs are created dynamically.

    
asked by anonymous 13.06.2017 / 16:41

5 answers

4

To select ALL the divs you can simply use the selector with:

var divs = $('div'); // Armazena um 'NodeList' com todos os elementos

Quantity:

var qtd = divs.length; // Numero inteiro da quantidade de divs

To change the% desired_co_default you can use the function div or addClass of css , remember that jquery starts from 0 so if you want to change for example color of the source of the fourth divs would look like this:

$(divs[3]).addClass('red');

var divs = $('div');
var length = divs.length;

$(divs[3]).addClass('red');
// Ou
$(divs[3]).css({
  color: 'red'
});
.red {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>1</div><div>2</div><div>3</div><div>4</div><div>6</div><div>7</div><div>8</div><div>10</div><div>11</div><div>12</div>

Tochangedivwithrepetition(from4to4)youcanusethedivsselectorcssselector,whichworksasfollows:

$('div:nth-child(4n+0)').css({color:'red'});

Explanation:

nth-child(xn+x)selectsthenumberofnth-childyouwantforexamplediv,selectthefirstelementandsoon,ifyouuseasintheexampleaboveitwillusethefollowinglogic:

:nth-child(1)skip4outof4.

:nth-child(4n...startingfrom0

Youcantestbychangingthenumbers:...+0)"Skip 2 by 2 starting from the first"

    
13.06.2017 / 17:03
8

For the problem you presented, you do not need to use Javascript. Incrementing element count can be done through the counter-increment property. the sum of the elements can be done with the function counter() . p>

Get the fourth element, can be done with the pseudo classes nth-child or nth-of-type .

/* Todo elemento <div> irá incrementar o contador "divnumber". */
div {
  counter-increment: divnumber
}

/* "counter" irá pegar o valor de "divnumber". */
span::after {
  content: 'Existem ' counter(divnumber) ' divs.'
}

/* ntd-child irá pegar o quarto elemento <div>. */
div:nth-child(4) {
  color: red
}
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>


<br><br>
<span></span>
    
13.06.2017 / 22:01
1

I set the code to count the divs and only fill in if I have more than 3. I get all the divs that contains class 'd' for counting and modifying.

jQuery(document).ready(function(){
      if(jQuery('.d').length > 3){
        jQuery(jQuery('.d')[3]).addClass('red');
      } else{
        alert('A quantidade de divs na tela é inferior a 4');
      }
    })
.red{
          background: red;
          width: 200px;
          height: 200px;
          float:left;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
    
13.06.2017 / 16:49
0
 $(document).ready(function() 
            {
                $('div').each(function(i, value)
                    {
                        if(i ==3)
                        {
                            $(value).addClass('teste');
                        }
                    });

            });
    
13.06.2017 / 17:10
0

As the question did not specify the use of JQuery , I think a solution with Javascript Vanilla:

// Obter a quantidade de divs
var quantidadeDivs = document.getElementsByTagName("div").length;

// Obter array com todas as divs da página
var divs = document.getElementsByTagName("div");

// Adicionando a classe vermelho na quarta div
divs[3].classList.add('vermelho');
    
13.06.2017 / 21:51