对于默认情况下全部隐藏的项目列表,第一个li
的display
为block
。问题是,如果删除第一个元素,则不会更新,实际上是制作了一个新的第一个孩子,应该显示该孩子。在Safari中,不会显示应显示的新li
。
的HTML
<ul class="list">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
<button>click me </button>
的CSS
.list .item { display: none }
.list .item:first-child { display:block}
JS
$('button').on('click', function(e) {
$('ul li:first').remove().appendTo($('ul'));
});
参见小提琴:http://jsfiddle.net/BFTan/1/
在所有其他浏览器中,单击按钮将在项目之间循环,但是在Safari中没有任何更新。
最佳答案
这似乎是display: none
出现的问题,并且从文档树中删除的对象在您使用:first-child
时会显现出来,而不是Safari处理:first-child
选择器本身固有的问题。
无论哪种方式,这绝对是一个错误。即使将对象(及其内容)与其父对象分离,jQuery也不会销毁该对象,但是当将元素与其父对象分离时,无论n的值是多少,它都不再是其父对象的第n个子对象,因此下一个元素成为第一个孩子的应该相应地匹配:first-child
。
如果将代码中的:first-child
更改为:not(:last-child)
(如this),使得一次显示两个元素,则在Safari中,当您单击按钮时会注意到第一个元素消失,剩下第二个元素完好无损(以及仍然隐藏的第三个)。
我还发现,如果您在列表本身上使用:empty
选择器添加新的空规则:
/* Or even .list:empty even though it's not actually empty */
.list:not(:empty) {}
一切都会在Safari中突然work correctly。更奇怪的是,这种解决方法不适用于任何其他3级伪类。它仅适用于
:empty
或:not(:empty)
。