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

我做了一个无序列表，它的列表项目随机化，其中我只想在正常的屏幕尺寸上显示5，在较小的屏幕尺寸上显示为3。jQuery切片后重新添加列表项并删除

通过使用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/

在此先感谢。

来源

2016-03-02 Sanderfish

你能创建的jsfiddle HTTP： //jsfiddle.net来演示？为什么你在'else'的'.appendTo（）'之后调用'.detach（）'？ – guest271314

我刚刚加了个jsfiddle。我按顺序给他们打电话，因为它显示所有列表项目，否则。 – Sanderfish

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

来源

2016-03-02 15:24:04 guest271314

你的回答让我想到了解决方案。我在'showHide（）;'：'$（“ul li”）。slice（5）.remove（）;之前添加了以下内容：在随机化后删除不需要的列表项。我会将其添加到您的答案中。谢谢！ – Sanderfish

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

来源

2016-03-02 15:28:34 BenG

因为我需要首先随机化列表项目的顺序，所以我无法使用CSS媒体查询。在Javascript可以随机化他们的订单之前，这些将隐藏列表项。 – Sanderfish

如果您将订单随机化，那么这应该仍然有效。 – BenG

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

回答

相关问题