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

Question

в данном случае

<p class="error" style>текст 3</p>

<p class="error" style="display: none">текст 1</p>
<p class="error" style="display: none">текст 2</p>
<p class="error" style>текст 3</p>
<p class="error" style>текст 4</p>
<p class="error" style="display: none">текст 5</p>
<p class="error" style>текст 6</p>
<p class="error" style="display: none">текст 7</p>
<p class="error" style="display: none">текст 8</p>

Answer 1

jQuery предоставляет селектор :visible позволяющий выбрать видимые элементы.

Видимыми элементами считаются элементы, занимающие какое-либо пространство в документе.

Из полученной выборки достаточно получить первый элемент:

console.log($('.error:visible').eq(0).text());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="error" style="display: none">текст 1</p>
<p class="error" style="display: none">текст 2</p>
<p class="error" style>текст 3</p>
<p class="error" style>текст 4</p>
<p class="error" style="display: none">текст 5</p>
<p class="error" style>текст 6</p>
<p class="error" style="display: none">текст 7</p>
<p class="error" style="display: none">текст 8</p>

Answer 2

const getElement = (position) => {  
  const errorsNode = document.querySelectorAll('.error');  
  const errors = [...errorsNode]; 
  
  const filterElements = errors.filter(element => element.style.display === ''); 
  return filterElements[position];
 }  
 
 console.log(getElement(0));

 <body>
    <p class="error" style="display: none">текст 1</p>
    <p class="error" style="display: none">текст 2</p>
    <p class="error" style>текст 3</p>
    <p class="error" style>текст 4</p>
    <p class="error" style="display: none">текст 5</p>
    <p class="error" style>текст 6</p>
    <p class="error" style="display: none">текст 7</p>
    <p class="error" style="display: none">текст 8</p>
    <script src="script.js"></script>
  </body>

БЛОГ НА HUSL

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

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