在jQuery slice之后重新追加列表项并删除

Question

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

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

然而，在达到＆lt; 650px窗口大小（切成3个项目）后，当回到＆gt; 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/

提前致谢。

Answer 1

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

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 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/