如何使用jquery更改innerhtml位置

如何使用jquery更改innerhtml位置

本文介绍了如何使用jquery更改innerhtml位置?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

下面是我试过的代码....



我尝试过:



函数SwapInnerHtml(){
cc = 0;
a = [];
serializedDataParent = [];
serializedDataChild = [];
var obj = $(#ContainerDIV)。eq(0).clone();
serializedData = [];
serializedDataParent = [];
serializedDataChild = [];
$('#ContainerDIV')。find('*')。each(function(){//为sortng html添加类名
var n = $(this).attr('id' );
if(typeof(n)!='undefined'){
if(n.indexOf(table)!= -1){
if(n.indexOf( tr)== -1&& n.indexOf(td)== -1){
$(this).addClass('sort');
}
}
else {
$(this).addClass('sort');
}
}
});

$('#ContainerDIV')。find('。sort')。each(function(){//获取数组中的所有元素。
cc ++;
var node = document.getElementById($(this).attr('id'));
a.push(node)

});

$('#ContainerDIV')。find('。sort')。each(function(){
///getpos($(this).attr('id') ); //使用容器获取每个div位置
var np = $(this).attr('id');
var parent = $(this).parents()。attr('id' );
// nposition = $(this).position();
var pp = {id:np,left:nposition.left,top:nposition.top,parent:parent};
serializedData.push(pp);
if($(#+ np +。sort)。length> 0){
serializedDataParent.push(pp);
} else {
var parentID = document.getElementById(np).parentNode.id
if(parentID ==='ReadyTdrop'){
serializedDataParent.push(pp);
} else {
serializedDataChild.push(pp);
}
}
});

serializedData.sort(function(a,b){
return(a.left - b.left);
});
serializedData.sort(function(a,b){
return(a.top - b.top);
});
serializedDataParent.sort(function(a,b){
return(a.left - b.left);
});
serializedDataParent.sort(function(a,b){
return(a.top - b.top);
});
serializedDataChild.sort(function(a,b){
return(a.left - b.left);
});
//serializedDataChild.sort(function(a,b){
// return(a.top - b.top);
//});
$(#ContainerDIV)。empty(); //在排序之前清除div。

for(var i = 0; i< serializedDataParent.length; i ++){
// var node = document.getElementById(serializedDataParent [i] .id);
for(var k = 0; k< a.length; k ++)
{
if(a [k] .id == serializedDataParent [i] .id)
{
var node = a [k];
// node.remove(。sort);
// node.empty();
$(#+ serializedDataParent [i] .parent).append(node);
if(node.tagName!=TABLE){
$(#+ a [k] .id).empty();
}
}
}

}

for(var i = 0; i< serializedDataChild.length; i ++){
// var node = document.getElementById(serializedDataChild [i] .id);
for(var k = 0; k< a.length; k ++){
if(a [k] .id == serializedDataChild [i] .id){
var node =一个[K];
//node.remove(\".sort);
//node.empty();
$(#+ serializedDataChild [i] .parent).append(node);
if(node.tagName!=TABLE){
$(#+ a [k] .id).empty();
}

}
}

}


} //交换结束。


function getpos(iid){//从ReadytDrop容器获取位置。
childpos = 0;
var parid = $(#+ iid).parent()。attr('id');
var npos_chk = $(#+ iid).position();
if(parid!='ContainerDIV')
{
$('#'+ iid).parentsUntil(#ContainerDIV)。each(function(){
var idi =($(this).attr('id'));
var parid2 = $(this).parent()。attr('id');
var npos = $(this) .position();
npos_chk.left = npos_chk.left + npos.left;
npos_chk.top = npos_chk.top + npos.top;
nposition = npos_chk;
} );
} else {
nposition = $(#+ iid).position();
}
}
解决方案




below is the code i have tried ....

What I have tried:

function SwapInnerHtml() {
        cc = 0;
        a = [];
        serializedDataParent = [];
        serializedDataChild = [];
        var obj = $("#ContainerDIV").eq(0).clone();
        serializedData = [];
        serializedDataParent = [];
        serializedDataChild = [];
        $('#ContainerDIV').find('*').each(function () {//add class name for sortng html
            var n = $(this).attr('id');
            if (typeof (n) != 'undefined') {
                if (n.indexOf("table") != -1) {
                    if (n.indexOf("tr") == -1 && n.indexOf("td") == -1) {
                        $(this).addClass('sort');
                    }
                }
                else {
                    $(this).addClass('sort');
                }
            }
        });

        $('#ContainerDIV').find('.sort').each(function () { //get all elements in array.
            cc++;
            var node = document.getElementById($(this).attr('id'));
            a.push(node)

        });

        $('#ContainerDIV').find('.sort').each(function () {
            ///getpos($(this).attr('id'));//getting each div position with container
            var np = $(this).attr('id');
            var parent = $(this).parents().attr('id');
            // nposition = $(this).position();
            var pp = { id: np, left: nposition.left, top: nposition.top, parent: parent };
            serializedData.push(pp);
            if ($("#" + np + " .sort").length > 0) {
                serializedDataParent.push(pp);
            } else {
                var parentID = document.getElementById(np).parentNode.id
                if (parentID === 'ReadyTdrop') {
                    serializedDataParent.push(pp);
                }else{
                    serializedDataChild.push(pp);
                }
            }
        });

        serializedData.sort(function (a, b) {
            return (a.left - b.left);
        });
        serializedData.sort(function (a, b) {
            return (a.top - b.top);
        });
        serializedDataParent.sort(function (a, b) {
            return (a.left - b.left);
        });
        serializedDataParent.sort(function (a, b) {
            return (a.top - b.top);
        });
        serializedDataChild.sort(function (a, b) {
            return (a.left - b.left);
        });
        //serializedDataChild.sort(function (a, b) {
        //    return (a.top - b.top);
        //});
        $("#ContainerDIV").empty();//clear div before sorting.

        for (var i = 0; i < serializedDataParent.length; i++) {
            // var node = document.getElementById(serializedDataParent[i].id);
            for (var k = 0; k < a.length;k++)
            {
                if(a[k].id==serializedDataParent[i].id)
                {
                    var node = a[k];
                  // node.remove(".sort");
                  // node.empty();
                    $("#" + serializedDataParent[i].parent).append(node);
                    if (node.tagName!="TABLE"){
                        $("#" + a[k].id).empty();
                    }
                }
            }

        }

        for (var i = 0; i < serializedDataChild.length; i++) {
            //var node = document.getElementById(serializedDataChild[i].id);
            for (var k = 0; k < a.length; k++) {
                if (a[k].id== serializedDataChild[i].id) {
                    var node = a[k];
                    //node.remove(".sort");
                    //node.empty();
                    $("#" + serializedDataChild[i].parent).append(node);
                    if (node.tagName != "TABLE") {
                        $("#" + a[k].id).empty();
                    }

                }
            }

        }


    }//swap end.


   function getpos(iid) {//get position from ReadytDrop container.
        childpos = 0;
        var parid = $("#" + iid).parent().attr('id');
        var npos_chk = $("#" + iid).position();
        if (parid != 'ContainerDIV')
            {
        $('#' + iid).parentsUntil("#ContainerDIV").each(function () {
            var idi = ($(this).attr('id'));
            var parid2 = $(this).parent().attr('id');
            var npos = $(this).position();
            npos_chk.left = npos_chk.left + npos.left;
            npos_chk.top = npos_chk.top + npos.top;
            nposition = npos_chk;
        });
        } else {
             nposition = $("#" + iid).position();
        }
    }
解决方案




这篇关于如何使用jquery更改innerhtml位置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-30 08:40