javascript - 表格网格内的随机可见 div

Question

我的情况 -
在 4x4 表格网格(总共 16 个单元格)中，我试图在它们自己的单个单元格中显示最多 7 个 div(无论哪个 div 可见，都在它自己的单元格中 - 每个单元格 1 个 div)。

我需要什么/我的问题 -
如果 div“Test1”、“Test3”、“Test6”淡入，然后将这些 div 显示在 3 个不同的单元格上，..如果有 6 个 div，6 个不同的单元格，等等。

注意:“Test”后面的数字(Test0、Test1 等)都是自动生成的，实际上是 18 位长(例如 123456789012345678)，所以我永远不会知道实际数量。我正在考虑使用下面的函数来查找所有包含“测试”的 div id，将这些结果放在数组中，然后以某种方式提取每个结果并将其附加到随机单元格。但我不确定如何去做......:

 $("div[id^='Test']").each(function(n, i) {
        var id = this.id;      
    });

我的主要问题 - 如何在自己的单元格上显示当前可见的 div？

我尝试过的 -
我正在进行的工作:http://jsfiddle.net/xVDm9/

编辑:我从代码中注释掉了黑色重新出现的 div，因为这可能令人困惑并且没有真正说明问题。

Answer 1

我不太确定您要构建什么。但是，给所有 tablecells 一个div 不是更容易吗？然后淡入淡出？这比每次要显示/隐藏 div 时都操作 DOM 更快。

这样，您可以使用 :visible 选择器来测试所选 div 是否已经可见。如果是，则淡入下一个。

此外，在某些浏览器中，动态附加/更改表本身会导致问题。除此之外，我建议不要使用表，而是使用以下结构(它更容易遍历并且更具可扩展性):

<div style="width: 400px;">
   <div class="tcell">
     <div id="yourUniqueID">
     </div>
   </div>
   <!-- ...repeat the div.tcell as often as you need -->
 </div>

并像这样设置样式:

.tcell{
  float: left;
  height: 100px;
  width: 33.33%; /* that's for 3 on a row, use whatever value you need */
}

.tcell > div{
  display: none; /* hide by default, since you'll be using jQuery to fadeIn/Out */
  width: 100%;
  height: 100%;
  background: #000;
}