Question

我想从列表中显示12个<li>元素，将它们随机播放并隐藏其余元素。为了做到这一点，我使用了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()
  }

}

好吧，那么问题是什么？

问题是，在这个列表里面是方形图片和4个瓷砖我想要旋转以及图片（让它们在选定的12里面改变位置），但是它们仍然在选定区域。

如果有人可以建议我知道我该怎么做，我将不胜感激。

JSFiddle

Answer 1

以下是JSFiddle

的建议

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

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

因此它仅适用于将锚标记作为子标记的li元素。

此外，您可以通过向想要改组的元素添加特定类来实现此目的，例如＆＃34; .shuffable＆＃34;然后在这些元素上调用.shuffle（）方法：

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

Answer 2

感谢您的回答，如果我希望瓷砖留在同一个地方，您的解决方案将是完美的。但正如我写的，我希望他们改变他们的位置，但仍然在其他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区域中，但此解决方案会出现另一个问题。该列表的整个结构是中断:(

还有其他建议吗？

从<ul>中随机播放12个<li>元素，不包括列表中的3个元素</ul> </li>

2 个答案: