Проверка наличия псевдокласса ::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 в ДОМ-элемент

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

Новые блоги и статьи Все статьи Все блоги /
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .

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

Решение