Как получить 10 элементов у которых нет стиля display:none и установить им этот стиль?

Question

Есть такой код. При клике на кнопку хочу взять первых 10 div у которых прописан стиль display:none; и сменить этим дивам стили на display:block;

<div class="main_content">

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div style="display:none;">Сменить с none на block</div>
    <div style="display:none;">Сменить с none на block</div>
    <div style="display:none;">Сменить с none на block</div>
    <div style="display:none;">Сменить с none на block</div>
    <div style="display:none;">Сменить с none на block</div>
    <div style="display:none;">Сменить с none на block</div>
    <div style="display:none;">Сменить с none на block</div>
    <div style="display:none;">Сменить с none на block</div>
    <div style="display:none;">Сменить с none на block</div>
    <div style="display:none;">Сменить с none на block</div>

    <button id="show_more">Взять первых 10 и сменить style</button>

</div>

Answer 1

/* Обработчик на кнопку */
$('#show_more').on('click', function() {
  // Находим все подходящие блоки и заносим в массив
  let aDivs = [...$('div[style="display:none;"]')];
  // Если количество блоков <10, то показываем те, что есть 
  let nDivs = (aDivs.length < 10) ? aDivs.length : 10;
  // Отбрасываем лишние блоки, а оставшимся...
  $(aDivs.slice(0, nDivs)).each(function() {
    // ... назначаем нужный стиль
    $(this).css('display', 'block');
  });
});

.main_content div { border: 2px dotted transparent; width: 20px; height: 20px; box-shadow: inset 1px 1px 5px black; float: left; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_content">

  <div>A</div>
  <div>B</div>
  <div style="display:none;">0</div>
  <div>C</div>
  <div>D</div>
  <div style="display:none;">1</div>
  <div style="display:none;">2</div>
  <div style="display:none;">3</div>
  <div style="display:none;">4</div>
  <div>E</div>
  <div style="display:none;">5</div>
  <div style="display:none;">6</div>
  <div style="display:none;">7</div>
  <div style="display:none;">8</div>
  <div style="display:none;">9</div>
  <div style="display:none;">10</div>
  <div style="display:none;">11</div>
  <div style="display:none;">12</div>
  <div>F</div>

  <button id="show_more">Взять первых 10 и сменить style</button>

</div>

БЛОГ НА HUSL

Как получить 10 элементов у которых нет стиля display:none и установить им этот стиль?

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