如何逐步删除课程[重复]答案

【问题标题】：How remove class step by step [duplicate]如何逐步删除课程[重复]
【发布时间】：2021-05-30 04:00:25
【问题描述】：

我有清单项目：

<ul>
    <li> 1</li>
    <li> 2</li>
    <li> 3</li>
    <li class="item hidden"> 4</li>
    <li class="item hidden"> 5</li>
    <li class="item hidden"> 6</li>
    <li class="item hidden"> 7</li>
    <li class="item hidden"> 8</li>
    <li class="item hidden"> 9</li>
    <li class="item hidden"> 10</li>
    <li class="item hidden"> 11</li>
    <li class="item hidden"> 12</li>
</ul>

<div id="btn">click btn</div>

$(function () {
  $('#btn').click(function(evt) {
    evt.stopPropagation(); //stops the document click action
    $('ul li.item').removeClass('hidden');
  });
});

此 jQuery 代码删除所有类“隐藏”，但是如何从前三个中删除一个类，然后是接下来的三个等等...？

应该是这样的：

点击按钮

<ul>
    <li> 1</li>
    <li> 2</li>
    <li> 3</li>
    <li class="item "> 4</li>
    <li class="item "> 5</li>
    <li class="item "> 6</li>
    <li class="item hidden"> 7</li>
    <li class="item hidden"> 8</li>
    <li class="item hidden"> 9</li>
    <li class="item hidden"> 10</li>
    <li class="item hidden"> 11</li>
    <li class="item hidden"> 12</li>
</ul>

然后点击按钮

<ul>
    <li> 1</li>
    <li> 2</li>
    <li> 3</li>
    <li class="item "> 4</li>
    <li class="item "> 5</li>
    <li class="item "> 6</li>
    <li class="item "> 7</li>
    <li class="item "> 8</li>
    <li class="item "> 9</li>
    <li class="item hidden"> 10</li>
    <li class="item hidden"> 11</li>
    <li class="item hidden"> 12</li>
</ul>

等等……

https://jsfiddle.net/ep8dk9o5/

【问题讨论】：

.slice(0, 3)。另外，熟悉一下其他traversing methods。
Duplicate of How to select first N elements with jquery?。
根据副本，你最终会得到这样的结果：$('ul li.item.hidden:lt(3)').removeClass('hidden');
您可以使用eq选择您需要的索引处的项目。像这样$('ul li').eq(0).removeClass('theclass')，你一个一个地做，或者你可以使用css选择器并一次删除三个：$('ul li:nth-of-type(1), ul li:nth-of-type(2), ul li:nth-of-type(3)').removeClass('theclass')

标签： javascript jquery

【解决方案1】：

每次单击按钮时，只需将具有隐藏类的项目切片，如下所示：

$(function() {
  $('#btn').click(function(evt) {
    evt.stopPropagation(); //stops the document click action
    $('ul li.item.hidden').slice(0, 3).removeClass('hidden');
  });
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li> 1</li>
  <li> 2</li>
  <li> 3</li>
  <li class="item hidden"> 4</li>
  <li class="item hidden"> 5</li>
  <li class="item hidden"> 6</li>
  <li class="item hidden"> 7</li>
  <li class="item hidden"> 8</li>
  <li class="item hidden"> 9</li>
  <li class="item hidden"> 10</li>
  <li class="item hidden"> 11</li>
  <li class="item hidden"> 12</li>
</ul>

<div id="btn">click btn</div>

【讨论】：

Fiddle 这个答案