jQuery切片後重新添加列表項並刪除

Question

我做了一個無序列表，它的列表項目隨機化，其中我只想在正常的屏幕尺寸上顯示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/

在此先感謝。

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>