javascript - 在 jQuery 切片后重新 append 列表项并删除

Question

我制作了一个随机列表项的无序列表，其中我只想在正常屏幕尺寸上显示 5 个，在较小屏幕尺寸上显示 3 个。

通过使用 jQuery slice()函数我根据窗口大小删除其他列表项。

但是，在达到 <650px 窗口大小后(它被分割成 3 个项目)，当回到 >650px 窗口大小时，我似乎无法重新 append 删除的列表项。我尝试使用 detach()功能，但到目前为止无法正常工作。

这是我的代码:

function showHide() {
    var displayDefaultLarge = $("ul li").slice(5);
    var displayDefaultSmall = $("ul li").slice(3);

    var insertLarge = displayDefaultLarge;

    if ($(window).width() < 650) {
        insertLarge = displayDefaultSmall.detach();
    } else {
        insertLarge.appendTo("ul");
        insertLarge.detach();
    }
}

showHide();

$(window).resize(function() {
    showHide();
});

可在此处找到显示问题所在的 Jsfiddle:https://jsfiddle.net/ccmrfb4z/

提前致谢。

Answer 1

一个选项，而不是使用 javascript 是使用 css 媒体查询:-

li {
  display: inline-block;
}

/* standard - show 5 */
li:nth-child(n+6) {
  display: none;
}

/* less than 650 - show 3 */
@media (max-width: 650px) {
  li:nth-child(n+4) {
    display: none;
  }
}

<ul>
  <li>
    <a href="#">
      <div class="item">
        <img src="http://placehold.it/50x50">
      </div>
      <p>Name</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="item">
        <img src="http://placehold.it/50x50">
      </div>
      <p>Name</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="item">
        <img src="http://placehold.it/50x50">
      </div>
      <p>Name</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="item">
        <img src="http://placehold.it/50x50">
      </div>
      <p>Name</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="item">
        <img src="http://placehold.it/50x50">
      </div>
      <p>Name</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="item">
        <img src="http://placehold.it/50x50">
      </div>
      <p>Name</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="item">
        <img src="http://placehold.it/50x50">
      </div>
      <p>Name</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="item">
        <img src="http://placehold.it/50x50">
      </div>
      <p>Name</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="item">
        <img src="http://placehold.it/50x50">
      </div>
      <p>Name</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="item">
        <img src="http://placehold.it/50x50">
      </div>
      <p>Name</p>
    </a>
  </li>

</ul>