javascript - 强制在 IE 中重新应用样式表

Question

考虑这个 HTML：

<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>

这个CSS：

li:first-child { background: yellow; }

而这个Javascript（jQuery）：

$("ul").append($("li:first-child"));

http://fiddle.jshell.net/Xtuaf/

显然，当 DOM 发生变化时， Internet Explorer (8)会中断。:first-child我在 Javascript 中为这个问题写了一个解决方法（在那里做样式；z-index在我的例子中是 es）。这是我想摆脱的丑陋快速修复。更好的解决方案是在 DOM 更改时强制重新应用样式表。这可以做到吗？或者这个问题有其他解决方案吗？

Answer 1

在 Internet Explorer 中，可以通过设置类名来触发重排：

$("ul").append($("li:first-child")).addClass('x').removeClass('x');

或者只是（演示： http: //fiddle.jshell.net/Xtuaf/1/）：

$("ul").append($("li:first-child"))[0].className += '';

Answer 2

可靠地导致整个 DOM 重排的一种方法是从 body 元素中快速添加和删除任意类。

$('body').addClass('foo').removeClass('foo');