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.
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.
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>
Tochangediv
withrepetition(from4to4)youcanusethedivs
selectorcss
selector,whichworksasfollows:
$('div:nth-child(4n+0)').css({color:'red'});
Explanation:
nth-child(xn+x)
selectsthenumberofnth-child
youwantforexamplediv
,selectthefirstelementandsoon,ifyouuseasintheexampleaboveitwillusethefollowinglogic:
:nth-child(1)
skip4outof4.
:nth-child(4n...
startingfrom0
Youcantestbychangingthenumbers:...+0)
"Skip 2 by 2 starting from the first"
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>
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>
$(document).ready(function()
{
$('div').each(function(i, value)
{
if(i ==3)
{
$(value).addClass('teste');
}
});
});
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');