对于默认情况下全部隐藏的项目列表,第一个lidisplayblock。问题是,如果删除第一个元素,则不会更新,实际上是制作了一个新的第一个孩子,应该显示该孩子。在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)

10-05 21:01
查看更多