本文介绍了如何使用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位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！