Проверка наличия псевдокласса ::after у конкретного элемента из массива

@Кверт · Регистрация: 04.05.2017

Студворк — интернет-сервис помощи студентам

Добрый день!
Нашел такую проверку на наличие псевдокласса ::after:

HTML5
1
2
3
4
5
6
7
8
<style>
.has::after {
  content: 'after';
}
</style>
<p class="has">has </p>
 
<p class="hasnt">hasn't</p>

JavaScript
1
2
3
4
5
6
7
8
9
const hasAfter = selector => {
  const el = document.querySelector(selector);
   
  return getComputedStyle(el, '::after').content !== 'none';
}
 
 
console.log(hasAfter('.has')); // true
console.log(hasAfter('.hasnt')); // false

Это работает, но у меня несколько элементов 1 класса и у некоторых есть ::after у некоторых нет, я беру их через jQuery $('.myclass'). Далее мне нужно какой то конкретный проверить, к примеру $('.myclass')[2], как это можно сделать? Вышеуказанным способом всегда показывает true

@NTHing · 06.11.2022, 21:04

Сообщение от Кверт

у меня несколько элементов 1 класса и у некоторых есть ::after у некоторых нет

Как это выглядит, дайте глянуть, пожалуйста...

@Кверт · 07.11.2022, 11:00 **[ТС]**

На конструкторе тильда так реализованы чекбоксы, что при нажатии появляется ::after с контентом галочки, а мне надо сверить что из них нажато, больше отличий у них нет, а сами элементы идентичны, имеют один класс чекбокса. У одних только есть ::after у других нет.

Добавлено через 15 минут

Сообщение от NTHing

Как это выглядит, дайте глянуть, пожалуйста...

То есть чекбоксов в принципе нет, есть скрытые инпуты и label, а аналог чекбокса это div с возможным псевдоэлементом

HTML5
1
<div class="t-input-group t-input-group_rd" data-input-lid="1663183210310" style="margin-bottom:29px;"><div class="t-input-block"><input type="hidden" class="t-checkboxes__hiddeninput js-tilda-rule" name="x" tabindex="-1" value="Мой товар" wfd-invisible="true"><div class="t-checkboxes__wrapper"><label class="t-checkbox__control" style="color:#000; font-size:14px;font-weight:400;font-family:Arial;"><input type="checkbox" value="Мой товар" class="t-checkbox" data-calc-value="9999"><div class="t-checkbox__indicator"></div>Мой товар </label></div><div class="t-input-error" wfd-invisible="true"></div></div></div>

Вот этот элемент при нажатии получает псевдокласс :: after :

HTML5
1
<div class="t-checkbox__indicator"></div>

И таких чекбоксов несколько, мне надо провести сверку по их выбору при нажатии на кнопку. Поэтому нужно понять наличие псевдокласса у конкретного элемента а не у класса в целом, это вообще возможно?

@NTHing · 07.11.2022, 13:24

Нужно проверить элементы с классом t-checkbox на чек.

JavaScript
1
2
3
4
5
6
var group = document.querySelectorAll('.t-checkbox')
group.forEach(item => {
    if(item.checked = 'true') {
        //
    }
})

@klyapa · 07.11.2022, 13:33

Сообщение от Кверт

Это работает, но у меня несколько элементов 1 класса

JavaScript
1
2
3
const getAfter = sel => [...document.querySelectorAll(sel)].filter(
    e => getComputedStyle(e, '::after')
);

krvsa · 07.11.2022, 14:54

Сообщение от Кверт

я беру их через jQuery $('.myclass'). Далее мне нужно какой то конкретный проверить, к примеру $('.myclass')[2], как это можно сделать?

Нужно "перевести" элемент jQuery в ДОМ-элемент

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!--
-->
<style>
.has::after {
    content: 'after';
}
</style>
<script>
/*
$(_ => {
})
document.addEventListener('DOMContentLoaded', _ => {
})
*/
</script>
</head>
<body>
<p class='has'>Item 0</p>
<p>Item 1</p>
<p class='has'>Item 2</p>
<p>Item 3</p>
<p class='has'>Item 4</p>
 
<script>
const o = $('p')
o.each(function (i){
    if (getComputedStyle(this, '::after').content !== 'none') console.log(i)
})
console.log(getComputedStyle(o.get(0), '::after').content !== 'none') 
console.log(getComputedStyle(o.get(1), '::after').content !== 'none') 
</script>
</body>
</html>

@Кверт · 07.11.2022, 15:24 **[ТС]**

Сообщение от NTHing

Нужно проверить элементы с классом t-checkbox на чек.

Там нет чекбокса это скрытые инпуты с label это название класса div такое t_checkbox

@NTHing · 07.11.2022, 15:36

Там нет чекбокса это скрытые инпуты с label это название класса div такое t_checkbox

Вы не спешите, попробуйте, пожалуйста, мой вариант. Прочитайте его внимательно.

@Кверт · 09.11.2022, 18:17 **[ТС]**

Да, верно, показывает, значит вообще не в ту сторону думал, так как свойства checked не было в html коде. Спасибо большое

Добавлено через 18 минут

Сообщение от krvsa

Нужно "перевести" элемент jQuery в ДОМ-элемент

Попробовал этот способ тоже не выходит, выводит весь список элементов в независимости от того сколько имеет псевдокласс. По логике, как я понял контент принадлежит всему классу, и невозможно определить используется ли он у какого то конкретного элемента на данный момент, только обращением к классу в целом, а он там есть. В любом случае, спасибо

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

Проверка наличия псевдокласса ::after у конкретного элемента из массива

Решение