javascript - 使用 Jquery 在 prependTo 之后将列表恢复为先前的顺序

Question

我有一个列表，最初只显示四个（特色）列表项，一旦单击“显示更多”按钮，它就会显示列表的其余部分。我用来$('.featured').prependTo('.feature-list');先显示特色项目。但是，当我单击“显示更多”按钮时，我希望列表在 prependTo 发生之前以原始顺序显示。我似乎无法弄清楚如何做到这一点。

$('.featured').prependTo('.feature-list');

$('.feature-list').find('li:gt(3)').hide();
$('.more-btn').click(function() {
    $('.feature-list li:gt(3)').show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>List 1</p>
<ul class="feature-list feature-p-list1">
  <li>Item 1</li>
  <li class="featured">Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li class="featured">Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li class="featured">Item 8</li>
  <li class="featured">Item 9</li>
  <li>Item 10</li>
</ul>
<button class="more-btn">Show More</button>

标签： javascripthtmljquery

Answer 1

只需尝试使用:not()过滤器隐藏和显示

https://api.jquery.com/not-selector/

$('.feature-list > li:not(.featured)').hide()

$('.more-btn').click(function() {
  $('.feature-list > li:not(.featured)').show()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>List 1</p>
<ul class="feature-list feature-p-list1">
  <li>Item 1</li>
  <li class="featured"><b>Item 2</b></li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li class="featured">Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li class="featured">Item 8</li>
  <li class="featured">Item 9</li>
  <li>Item 10</li>
</ul>
<button class="more-btn">Show More</button>