In my web I have a list of 15 elements (or sets of HTML elements) like this:
I create the big pink number from a counter variable in PHP:
<div class="mr-3"> <?php echo '<span class="numero">'.$contador.'</span>'; ?> </div>
I would like that every time the variable acquires the value 2 or 12 (in general, any whose last digit is a 2, but since the maximum is 15, it does not matter) the container span
would be applied a margin-right: 15px;
so that it would not be so attached to the text that accompanies.
I have tried to do this:
$(function()
{
let contador = "<?php echo $contador;?>";
if(contador == 2 || contador == 12)
{
$('.numero').css('margin-right', '15px');
}
});
But JQuery finds no relationship between contador
and objects class="numero"
and just adds styling for all of them.
Thanks in advance for your help.
And why don't you deal with the problem from PHP directly? You could do something like this:
PHP
Add or not add the class
.margen
where this class had:CSS
EDIT
Another solution, since it seems like you want to use Jquery to fix it, would be to rely on an
data
HTML5 attribute :This way you would store
$contador
in the HTML and you could change the style of those that have the values 2 or 12 only:Or neither use Jquery and do it directly with CSS , as my colleague @x3k_js suggested: