Internet Explorer前置要以不同的方式顯示

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元素之前而不是第一個li之前

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

演示： 小提琴

這與使用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");
});

演示版

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

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

演示版