Есть множество дивов с известным id и одинаковым классом, нужно применить стиль к псевдоэлементу ::after, чтобы цвет псевдоэлемента был разным

Question

Есть множество дивов с известным id и одинаковым классом. Нужно применить стиль к псевдоэлементу ::after, чтобы цвет каждого псевдоэлемента был разным. Решение нужно на Jquery или JavaScript. Этот код некоректно присваивает стиль

$(document).ready(function() {
$('#' + 1318735 + '.top-circle::after').css('background-image', 'radial-gradient(110% 100% at 50% 0%, rgba(0, 0, 0, 0) 50%, rgb(32, 178, 170) 51%, rgb(32, 178, 170) 0px');
});

Этот код создает стиль для псевдоэлемента, и не присваивает класс к диву с заданным id.

$( "<style>.top-circle::after { background-image: radial-gradient(110% 100% at 50% 0%, rgba(0, 0, 0, 0) 50%, rgb(32, 178, 170) 51%, rgb(32, 178, 170) 0px); }</style>" ).appendTo( "#1318735" );

Дивы генерируются в цикле, поэтому каждому диву нельзя присвоить отдельный дополнительный класс.

<? foreach($arResult["ITEMS"] as $arItem):?>
<div id="<?= $arItem['ID']?>" class="top-circle akziya_img_wrapper akzii"><div>           
<?endforeach;?>

Это фрагмент из шаблона 1-с ьитрикс

Answer 1

Вы не можете управлять псевдоэлементами при помощи JS или JQ, но вы можете использовать переменные CSS

Например:

$('#item_'+Math.floor(Math.random() * 10)).css('--color-after', 'green'); // Изменяем значение переменной через функцию .css

.item {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: gray;
  --color-after: red; /* Лучше всего "устанавливать" переменную CSS в правиле родителя */
}

.item::after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-after); /* А применять её уже непосредственно в псевдоэлементе */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="item_1" class="item"></div>
<div id="item_2" class="item"></div>
<div id="item_3" class="item"></div>
<div id="item_4" class="item"></div>
<div id="item_5" class="item"></div>
<div id="item_6" class="item"></div>
<div id="item_7" class="item"></div>
<div id="item_8" class="item"></div>
<div id="item_9" class="item"></div>
<div id="item_10" class="item"></div>

Answer 2

вариант $('#' + 1318735 + '.top-circle::after') работать не будет, jQuery селекторы не работают с псевдоэлементами after и before

второй вариант рабочий, но id не должен начинаться с цифры

$(document).ready(function() {
$( "<style>#id1111111111111.top-circle::after { background-image: radial-gradient(110% 100% at 50% 0%, rgba(0, 0, 0, 0) 50%, rgb(32, 178, 170) 51%, rgb(32, 178, 170) 0px); }</style>" ).appendTo( "#id1111111111111" );
  });

body{
  margin: 0;
  padding: 0;
  display: flex;
  box-sizing: border-box;
  background: blue;
  flex-wrap:wrap;
  flex: 1 0;
}

.akzii{
  width: 100px;
  height: 100px;
  margin: 10px;
  background: gray;
}
.akzii:after{
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background: red;
  transform: translate(-10px, -10px);
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<body>
<div id="id1111111111111" class="top-circle akziya_img_wrapper akzii"></div>
<div id="2222222222222" class="top-circle akziya_img_wrapper akzii"></div>
<div id="3333333333333" class="top-circle akziya_img_wrapper akzii"></div>
<div id="4444444444444" class="top-circle akziya_img_wrapper akzii"></div>
<div id="5555555555555" class="top-circle akziya_img_wrapper akzii"></div>
<div id="6666666666666" class="top-circle akziya_img_wrapper akzii"></div>
<div id="7777777777777" class="top-circle akziya_img_wrapper akzii"></div>
<div id="8888888888888" class="top-circle akziya_img_wrapper akzii"></div>
<div id="9999999999999" class="top-circle akziya_img_wrapper akzii"></div>
</body>

БЛОГ НА HUSL

Есть множество дивов с известным id и одинаковым классом, нужно применить стиль к псевдоэлементу ::after, чтобы цвет псевдоэлемента был разным

Ответы (2 шт):