我希望使用jquery在点击时显示最多8个值

Question

我有一个按钮，可以在列表中添加一个新框。准确地看到八个方框后，如何让它消失？

  $(document).ready(function() {
    $('#added-more').click(function() {
      var paste = $('#copy li').clone();
      console.log(paste);
      $('#Compare-to-add').prepend(paste)
    })

  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<ul id="Compare-to-add">
  <div id="copy" style="display:none">
    <li><a href="#">Box</a>
    </li>
  </div>
  <li><a href="#">Box</a>
  </li>
  <li><a href="#">Box</a>
  </li>
  <li><a href="#">Box</a>
  </li>

  <p id="added-more">
    <i class="fa fa-plus-circle"></i>
  </p>

</ul>

Answer 1

尝试更新fiddle

  $(document).ready(function() {
    $('#added-more').click(function() {
      var paste = $('#copy li').clone();
      console.log(paste);
      $('#Compare-to-add').prepend(paste)
      //following if condition has been added
      if ($("#Compare-to-add li:visible").size() == 8 )
      {
         $('#added-more').hide();
      }
    })
  });