Javascript 不重新加载iframe的排序列表

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

window.onload=函数（）{
var my_ul=document.getElementById（'my_ul'），
my_按钮=document.getElementById（“my_按钮”）；
函数排序_函数（）{
对于（变量i=0；i<5；i++）{
var列表=[1,2,3,4,5]；
my_ul.appendChild（document.querySelector（'[data sort=“'+list[i]+'“]）；
}
}
my_button.onclick=函数（）{
sort_函数（）；
}
}

3
2
4
1
5

如果在DOM中移动对象，它将被删除并重新附加。结果是，

iframe

的内容将被重新加载

我不知道您在这些iFrame中显示了什么，但也许您可以去掉它们，使用AJAX（f.e.）动态加载内容

如果您真的想使用

iframe

并且真的想避免重新加载它们，我认为唯一的方法是使

li

元素浮动并动态地重新定位它们

我创造了一个新的世界。代码使用jQuery

HTML

关闭li标签

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

检查这个

<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>

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

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