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

Re-append list items after jQuery slice and remove

本文关键字：追加 列表 删除 切片 jQuery 新追加      更新时间：2023-09-26

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

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

但是，在达到 <650px 窗口大小（它切片为 3 个项目）后，当返回到>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/

提前谢谢。

一个

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

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

相关文章：