Question

我的情况 -
在4x4表格中（总共16个单元格），我试图在他们自己的单个单元格中显示最多7个div（无论哪个div是可见的，将它放在自己的单元格中 - 每个单元格1个div）。

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

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

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

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

我尝试了什么 -
我正在进行的工作：http://jsfiddle.net/xVDm9/

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

Answer 1

我不太确定你想要建造什么。 Hoewever，给所有 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;
}

表格网格内的随机可见div

1 个答案: