Javascript 从中洗牌12个元素，从列表中排除3个元素

我想从列表中显示12个元素，将它们洗牌，并隐藏其余元素。为了做到这一点，我使用了shuffle.js，它工作得非常完美，我还使用了这几行代码来隐藏其余的元素：

$('ul.small-block-grid-4').each(function(){

  var max = 11
  if ($(this).find('li').length > max) {
    $(this)
      .find('li:gt('+max+')')
      .hide()
      .end()
  }

}

$('ul.small-block-grid-4 li.shuffable').shuffle();

好的，那有什么问题

问题是，在这个列表中有正方形的图片和4个我想旋转的瓷砖，还有图片让它们在选定的12个区域内改变位置，但它们仍然在选定的区域内

如果有人能建议我如何做，我将不胜感激

这里有一个建议

我刚刚选择了所有a href元素，并调用了它们的父元素：

$('ul.small-block-grid-4 li a').parent().shuffle();

因此，它将仅应用于将锚定标记作为子元素的li元素

此外，您还可以通过将特定类添加到那些要像.shuffable一样进行无序移动的元素中，然后对这些元素调用.shuffle方法来实现这一点：

$('ul.small-block-grid-4').each(function(){

  var max = 11
  if ($(this).find('li').length > max) {
    $(this)
      .find('li:gt('+max+')')
      .hide()
      .end()
  }

}

$('ul.small-block-grid-4 li.shuffable').shuffle();

---

谢谢你的回答，如果我想让瓷砖保持在原来的位置，你的解决方案将是完美的。但正如我所写，我希望他们改变他们的位置，但仍然在其他12张图片的区域

我是这样写smg的：

$('ul.small-block-grid-4 li').shuffle();

$('ul.small-block-grid-4').each(function(){
  var max = 8
  var tile = 3
  if ($(this).find('li').length > max) {

  $(this).find('li:gt('+max+')').hide().end()

  if ($('ul.small-block-grid-4 > li:gt('+max+')').find('li.tile').length < tile) {
      $('li.tile').show().end()
  }

  }
}); 

它的工作原理是，当刷新并更改其在该区域中的位置时，这4个磁贴仍在12的区域中，但此解决方案会出现另一个问题。该列表的整体结构是：

---

还有其他建议吗？

谢谢您的回答，如果我想让瓷砖留在原来的位置，您的解决方案将是完美的。但正如我所写，我希望他们改变他们的位置，但仍然在12张其他图片的区域。我似乎不明白你真正想要的是什么，你想要的是团队洗牌，而不是所有的牌？我想你可以在你的问题中添加一个图形来更好的理解。它工作完美！谢谢你：我想把整组图片按优先顺序洗牌，使4个平铺始终可见，但当页面刷新时，它们位于不同的位置。当我没有像你那样把那些瓷砖从整个群体中分离出来时，它们正在消失。现在，它们不是，其余的图像也在洗牌：但是如果我想将平铺与其余的图像混合，仍然将它们保持在12的区域作为优先级，该怎么办？现在没关系，他们只是在这4块牌中洗牌。也许你会有另一个解决办法？看看我的代码，它是有效的，但我不知道为什么ul结构会与它相悖。