Safari 错误:当使用 JS 删除项目时,first-child 不更新 display:block

Safari bug :first-child doesn#39;t update display:block when items are removed with JS(Safari 错误:当使用 JS 删除项目时,first-child 不更新 display:block)
本文介绍了Safari 错误:当使用 JS 删除项目时,first-child 不更新 display:block的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

默认情况下隐藏所有项目的列表,第一个 li 具有 blockdisplay.问题是如果第一个元素被删除,这将不会更新,实际上是创建一个应该显示的新的第一个子元素.在 Safari 中,不显示应该显示的新 li.

With a list of items where all are hidden by default, the first li has a display of block. The problem is that this won't update if the first element is removed, de facto making a new first-child which should be displayed. In Safari the new li that should show is not displayed.

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 中没有任何更新.

In all other browsers clicking the button will cycle through the items but in Safari nothing updates.

推荐答案

这似乎是 display: none 和从文档树中删除的对象的问题,当您使用 :first-child,而不是 Safari 处理 :first-child 选择器本身的问题.

This appears to be a problem with display: none and objects removed from the document tree which manifests itself when you use :first-child, rather than a problem intrinsic to Safari's handling of the :first-child selector itself.

无论如何,这绝对是一个错误.即使您将对象(及其内容)与其父级分离,jQuery 也不会破坏该对象,但是当从其父级分离一个元素时,无论 n 的值如何,它都不应再是其父级的第 n 个子级,因此下一个元素成为第一个孩子的应该相应地匹配 :first-child.

Either way, this is definitely a bug. jQuery doesn't destroy the object even when you detach it (and its contents) from its parent, but when detaching an element from its parent it should no longer be the nth child of its parent for whatever value of n, so the next element that becomes the first child should match :first-child accordingly.

如果您将代码中的 :first-child 更改为 :not(:last-child),例如 this,这样您就有两个元素同时显示,当您单击按钮时,您会在 Safari 中注意到第一个元素消失,留下第二个元素完好无损(以及仍然隐藏的第三个).

If you change :first-child in your code to :not(:last-child), like this, such that you have two elements displaying at a time, you'll notice in Safari when you click the button the first element disappears, leaving the second element intact (as well as the third which is still hidden).

我还发现,如果您在列表本身上使用 :empty 选择器添加新的空规则:

I also found that if you add a new empty rule with the :empty selector on the list itself:

/* Or even .list:empty even though it's not actually empty */
.list:not(:empty) {}

一切都会突然在 Safari 中正常工作.更奇怪的是,这种解决方法不适用于任何其他 3 级伪类.它仅适用于 :empty:not(:empty).

Everything will suddenly work correctly in Safari. Even more bizarre is that this workaround does not work with any other level 3 pseudo-class. It only works with :empty or :not(:empty).

这篇关于Safari 错误:当使用 JS 删除项目时,first-child 不更新 display:block的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Using discord.js to detect image and respond(使用 discord.js 检测图像并响应)
Check if user ID exists in Discord server(检查 Discord 服务器中是否存在用户 ID)
Guild Member Add does not work (discordjs)(公会成员添加不起作用(discordjs))
Creating my first bot using REPLIT but always error Discord.JS(使用 REPLIT 创建我的第一个机器人,但总是错误 Discord.JS)
How do I code event/command handlers for my Discord.js bot?(如何为我的 Discord.js 机器人编写事件/命令处理程序?)
How to find a User ID from a Username in Discord.js?(如何从 Discord.js 中的用户名中查找用户 ID?)