2

我有一".hidden"堂课,我实时构建 DOM 元素。所以我得到一个简单的代码,如:

...
    <div class="hidden">1</div>
    <div class="hidden">2</div>
    <div class="hidden">3</div>
...

我的 CSS 定义不仅仅是简单的:

.hidden {
display: none;
}

.hidden:first-child {
display: block;
}

一切都很好,每个人都很开心。现在,如果我执行以下操作:$('.hidden:first-child').remove()它会删除,但不会出现下一个元素。它似乎仅在我单击开发人员控制台中的 DOM 节点时出现(在 chrome 中为 ctrl+shift+i)。

任何想法如何强制浏览器评估 CSS 规则?

更新 这是一个jsFiddle 测试用例。单击按钮后,您将看到“0”,没有其他数字,应该是“1”,然后是“2”,依此类推。

结论: 奇怪的是,但是如果我在 remove() 之前删除了 fadeOut(400) 它可以工作。

4

2 回答 2

2

尝试使用 css 伪类 :first-of-type 而不是 :first-child

这是关于 jsFiddle 的一个工作示例:http: //jsfiddle.net/jukDU/3/

于 2012-04-12T13:59:19.947 回答
0

我会先显示下一个项目,然后将其删除。

$('.hidden:first-child').next().show();
$('.hidden:first-child').remove();
于 2012-04-12T13:56:45.753 回答