我的情况 -
在 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,因为这可能令人困惑并且没有真正说明问题。
最佳答案
我不太确定您要构建什么。但是,给所有 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;
}
关于javascript - 表格网格内的随机可见 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8452244/