Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
18 / 15 / 3
Регистрация: 04.05.2017
Сообщений: 136

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

06.11.2022, 20:39. Показов 1210. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день!
Нашел такую проверку на наличие псевдокласса ::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
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
06.11.2022, 20:39
Ответы с готовыми решениями:

Проверка наличия определённого процесса у конкретного пользователя
Установлен WIN 2003 на нем установлена 1С. Пытаюсь написать BAT файл который стартовал при заходе юзера, и когда юзер выходит, завершал...

Проверка наличия элемента в массива и удаление из массива
чтобы понять на практике что такое массивы, я решил сделать примитивную программу. смысл такой: есть рюкзак (inventory) в нём два...

Добавление элемента в множество, и проверка наличия элемента во множестве (Java -> Си/Си++)
Здравствуйте! помогите, пожалуйста, перевести. Программа реализует две операции: добавление элемента в множество и проверку наличия...

8
 Аватар для NTHing
1818 / 962 / 388
Регистрация: 26.11.2014
Сообщений: 1,959
Записей в блоге: 1
06.11.2022, 21:04
Цитата Сообщение от Кверт Посмотреть сообщение
у меня несколько элементов 1 класса и у некоторых есть ::after у некоторых нет
Как это выглядит, дайте глянуть, пожалуйста...
0
18 / 15 / 3
Регистрация: 04.05.2017
Сообщений: 136
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>
И таких чекбоксов несколько, мне надо провести сверку по их выбору при нажатии на кнопку. Поэтому нужно понять наличие псевдокласса у конкретного элемента а не у класса в целом, это вообще возможно?
0
 Аватар для NTHing
1818 / 962 / 388
Регистрация: 26.11.2014
Сообщений: 1,959
Записей в блоге: 1
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') {
        //
    }
})
0
 Аватар для klyapa
3503 / 1267 / 429
Регистрация: 24.07.2016
Сообщений: 1,890
07.11.2022, 13:33
Цитата Сообщение от Кверт Посмотреть сообщение
Это работает, но у меня несколько элементов 1 класса
JavaScript
1
2
3
const getAfter = sel => [...document.querySelectorAll(sel)].filter(
    e => getComputedStyle(e, '::after')
);
0
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3807 / 1644 / 428
Регистрация: 14.03.2022
Сообщений: 4,091
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>
1
18 / 15 / 3
Регистрация: 04.05.2017
Сообщений: 136
07.11.2022, 15:24  [ТС]
Цитата Сообщение от NTHing Посмотреть сообщение
Нужно проверить элементы с классом t-checkbox на чек.
Там нет чекбокса это скрытые инпуты с label это название класса div такое t_checkbox
0
 Аватар для NTHing
1818 / 962 / 388
Регистрация: 26.11.2014
Сообщений: 1,959
Записей в блоге: 1
07.11.2022, 15:36
Лучший ответ Сообщение было отмечено Кверт как решение

Решение

Там нет чекбокса это скрытые инпуты с label это название класса div такое t_checkbox
Вы не спешите, попробуйте, пожалуйста, мой вариант. Прочитайте его внимательно.
1
18 / 15 / 3
Регистрация: 04.05.2017
Сообщений: 136
09.11.2022, 18:17  [ТС]
Да, верно, показывает, значит вообще не в ту сторону думал, так как свойства checked не было в html коде. Спасибо большое

Добавлено через 18 минут
Цитата Сообщение от krvsa Посмотреть сообщение
Нужно "перевести" элемент jQuery в ДОМ-элемент
Попробовал этот способ тоже не выходит, выводит весь список элементов в независимости от того сколько имеет псевдокласс. По логике, как я понял контент принадлежит всему классу, и невозможно определить используется ли он у какого то конкретного элемента на данный момент, только обращением к классу в целом, а он там есть. В любом случае, спасибо
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
09.11.2022, 18:17
Помогаю со студенческими работами здесь

Проверка наличия элемента в layout
Доброго времени суток. Подскажите - как провести проверку наличия элемента в коде. В моем случае необходимо провести проверку наличия...

Проверка наличия элемента в списке
Пусть имеется такой список public class Luck { public int ID { get; set; } public string Name...

Проверка наличия элемента в массиве
Можно ли проверить, есть ли элемент в массиве, не перебирая весь массив?

Проверка наличия элемента в списке
Допустим, что переменная names ссылается на список строковых значений. Напишите программный код, который определяет, находится ли имя...

JSON, проверка наличия элемента
Доброго дня, уважаемые. Буду благодарен за помощь в этом вопросе. Вот часть парсинга JSON: for i := 0 to JsonArray.Size - 1 do ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
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 - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru