排序列表无需重新加载iframe

Question

如何排序列表而不实现if里面的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动态加载内容（f.e. jQuery.get()）。

如果你真的想使用iframe，你真的想避免重新加载它们，我认为唯一的方法是使li元素浮动并动态地重新定位它们。我已创建jsFiddle that demonstrates this。代码使用jQuery。

HTML

关闭李标签

<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(); 
    }); 
});