Как получить только первый элемент (без display: none)?

Question

[marinkas]

в данном случае <p class="error" style>текст 3</p>

https://jsfiddle.net/e09qdsmb/4/

Comments

[mletov]

https://developer.mozilla.org/en-US/docs/Web/CSS/:...
+
https://developer.mozilla.org/en-US/docs/Web/API/D...

[marinkas]

mletov, не подходит. Он в разметке может быть где угодно. А нужно получить только первый элемент с таким параметром

Answer 1

[Aetae]

Так и получить:

document.querySelector('p.error:not([style="display: none"])')

Только учти, селектор сравнивают строки как есть, если там в style будет что-то ещё, или хотя-бы лишний пробел, то уже не поймает.

Comments

[Сергей delphinpro]

document.querySelector('p.error:not([style*="display: none"])')

должно сработать
или jquery
$('p.error:not(:visible)')
Это чисто jquery селектор

[marinkas]

Aetae, спасибо

[marinkas]

Сергей delphinpro , за jquery тоже плюс) спасибо

[Aetae]

Сергей delphinpro, убери пробел после двоеточия и всё сломается всё равно.)

[Сергей delphinpro]

Aetae, да, верно. ну тут один хрен ГК.

[marinkas]

Сергей delphinpro, но суть в том, что нужно $('p.error:visible')
только первый
$('p.error:visible')[0] вроде ошибку выдает

[Aetae]

marinkas, нет там никакх ошибок, ошибка где-то у тебя в коде, скорее всего ты ожидаешь, что полученный по индексу элемент тоже jquery-объект, а там просто DOM Element.
Чтоб получить именно jquery-объект, делать надо так:
$('p.error:visible').eq(0)

Ну и раз уж мы используем селекторы jq - можно сразу так сделать:
$('p.error:visible:first')

[lUser L]

Сергей delphinpro, Aetae, а не проще использовать модификаторы классы с display none вместо style и этих костылей ?

[Aetae]

Эмиль 🔥, кнешн проще. Но в тех же юзерскриптах не тебе решать.)