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

Question

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

通过使用 jQuery slice() 函数，我删除了基于 window 大小的其他列表项。

但是，在达到 <650px window 尺寸后（它分成 3 个项目），当回到 >650px window 时，我似乎无法重新附加删除的列表项目尺寸。我尝试使用 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

尝试使用 :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/

Answer 2

一个选项，而不是使用 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>

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

Re-append list items after jQuery slice and remove

javascript

jquery

append

html-lists

detach