javascript - 在不重新加载 iframe 的情况下对列表进行排序

Question

如何在不重新加载 li 内的 iframe 的情况下对列表进行排序？ (appendChild 使 iframe 重新加载)

<script>
window.onload = function () {
    var my_ul = document.getElementById('my_ul'),
        my_button = document.getElementById('my_button');

    function sort_function() {
        for(var i = 0; i < 5; i++) {
            var list = [1, 2, 3, 4, 5];
            my_ul.appendChild(document.querySelector('[data-sort="' + list[i] + '"]'));
        }
    }

    my_button.onclick = function () {
        sort_function();
    }

}
</script>

<a id=my_button href="#">Sort</a>
<ul id=my_ul>
    <li data-sort=3>3<iframe src="#3"></iframe>
    <li data-sort=2>2<iframe src="#2"></iframe>
    <li data-sort=4>4<iframe src="#4"></iframe>
    <li data-sort=1>1<iframe src="#1"></iframe>
    <li data-sort=5>5<iframe src="#5"></iframe>
</ul>

Answer 1

如果您在 DOM 中移动一个对象，它将被删除并重新附加。结果是 iframe 的内容将被重新加载。

我不知道您在这些 iframe 中显示的是什么，但也许您可以摆脱它们并使用 AJAX(例如 jQuery.get())动态加载内容。

如果你真的想使用 iframe 并且你真的想避免重新加载它们，我认为唯一的方法是让 li 元素 float 并动态重新定位它们.

我创建了一个 jsFiddle that demonstrates this .代码使用 jQuery。

HTML

关闭 li 标签

<a id="my_button" href="#">Sort</a>
<ul id="my_ul">
    <li data-sort=3>3<iframe src="#3"></iframe></li>
    <li data-sort=2>2<iframe src="#2"></iframe></li>
    <li data-sort=4>4<iframe src="#4"></iframe></li>
    <li data-sort=1>1<iframe src="#1"></iframe></li>
    <li data-sort=5>5<iframe src="#5"></iframe></li>
</ul>

CSS

对 li 元素使用绝对定位

#my_ul li {
   position: absolute;
   display: block;
}

Javascript

var iframeTop = 0;

// Initial positioning at document load
$(function() {
    var ofsTop = $("#my_ul li:first-child").position().top;
    $("#my_ul li").each(function(index, value) {
        $(value).css({ top: ofsTop + 'px'});
        ofsTop += $(value).height();
    });
});

// Re-position when user clicks #my_button
$("#my_button").click(function() {
    // sort li depending on data-sort
    var sorted = $("#my_ul li").sort(function(a, b) {
        return $(a).data("sort") - $(b).data("sort");
    });
    // re-position li's
    if (!iframeTop) iframeTop = $("#my_ul li:first-child").position().top;
    var ofsTop = iframeTop;
    $.each(sorted, function(index, value) {
        $(value).css({ top: ofsTop + 'px'});
        ofsTop += $(value).height();
    });
});