在 jQuery 切片后重新附加列表项并删除答案

【问题标题】：Re-append list items after jQuery slice and remove在 jQuery 切片后重新附加列表项并删除
【发布时间】：2016-06-15 12:17:45
【问题描述】：

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

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

但是，在达到 650px 的窗口大小时，我似乎无法重新附加已删除的列表项。我尝试使用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/

提前致谢。

【问题讨论】：

你能创建一个 jsfiddle jsfiddle.net 来演示吗？为什么在.appendTo()else 之后调用.detach()？
我刚刚添加了一个 jsfiddle。我按此顺序调用它们，因为它会显示所有列表项。

标签： javascript jquery append html-lists detach

【解决方案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>

【讨论】：

因为我需要先随机化列表项的顺序，所以我不能使用 CSS 媒体查询。这些将在 Javascript 随机化它们的顺序之前隐藏列表项。
如果你随机排序，那么这应该仍然有效。

【解决方案2】：

尝试使用:lt(), :gt() 选择器； .show()，.hide()

    function showHide() {

        if ($(window).width() < 650) {
            $("ul li:gt(2)").hide();
        } else {
            $("ul li:lt(5)").show();
        }
    }

    $("ul li").slice(5).remove();

    showHide();

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

jsfiddle https://jsfiddle.net/ccmrfb4z/1/

【讨论】：

您的回答让我找到了解决方案。我在showHide(); 之前添加了以下内容：$("ul li").slice(5).remove(); 以在随机化后删除不需要的列表项。我会将此添加到您的答案中。谢谢！