Internet Explorer prependTo以不同方式显示

Question

我有以下HTML代码： -

<ul id="list1">
    <li class="a">item 1</li>
    <li class="a">item 2</li>
    <li class="b">item 3</li>
    <li class="b">item 4</li>
</ul>

以下脚本： -

<script type="text/javascript">
    $("document").ready(function() {
            $("#list1 li:last").prependTo("#list1 li:first");

    });
</script>

预期的显示是： -

但在IE上我看到了： -

我正在使用jQuery 1.10.2。

任何线索？

Answer 1

您似乎正在尝试将最后li移至第一个位置，这意味着您需要将其添加到ul元素而不是第一个

$("#list1 li:last").prependTo("#list1");

演示：Fiddle

与使用insertBefore('#list1 li:first')

在第一个元素之前插入它相同

为什么浏览器的显示会有所不同？由于您通过将li附加到另一个li来创建无效的html标记，因此应将li添加到ul或ol元素

Answer 2

如果您想将最后一个li放在第一个li之前的第一个位置，请尝试改为使用insertBefore()：

$("document").ready(function() {
    $("#list1 li:last").insertBefore("#list1 li:first");
});

Demo

或者您可以使用具有相同效果的prependTo()：

$("document").ready(function() {
    $("#list1 li:last").prependTo("#list1");
});

Demo