Javascript 如何相互交换所有div

这就是我的画廊的样子：

我需要javascript/jquery函数：“arrow_left（）”和“arrow_right”来更改带有图像的div的位置（所有div都在中间）。例如，当我单击“图像2”上的右箭头时，“图像2”应与“图像3”交换其位置。 下面我介绍如何将“图像2”与“图像3”交换，使“图像2”为空（“图像3”将被删除）

功能箭头\右（id \编号）{
var present_div=$（“#”+id_编号）；
id_编号=id_编号+1；
var next_div=$（“#”+id_编号）；
$（当前分区）。替换为（下一分区）；
//$（next_div）.replaceWith（present_div）；第二个图像未被更新的原因是您使用了
replaceWith
。例如，您可以使用
您还可以通过添加第二个参数来计算id来改进现有的函数，因为arrow_left和arrow_right之间的唯一区别是加减1

function swapImage(shouldAddOne) {
  var id = $(event.target).parents('.portfolio-item').first().attr('id');
  id = id.split('_');
  id = id[id.length-1];
  id = parseInt(id, 10);
  var present_div = $('#ID_' + id)
  var present_div_html = present_div.html();
  id = shouldAddOne ? id + 1 : id - 1;
  var next_div = $('#ID_' + id);
  var next_div_html = next_div.html();

  $(present_div).html(next_div_html); 
  $(next_div).html(present_div_html);
}

您可以在html中这样使用它：
swapImage（true）
向右移动，而
swapImage（false）
向左移动

如果您更愿意使用库，您可以查看一下
您可以这样替换outerHTML中的元素：

 function arrow_change(el, fw) {
    var id = el.parentElement.parentElement.id;
    var id_number = eval(id.substr(3))
    var present_div = $('#ID_' + id_number + " div").get(0);//get(0) returns first DOM Element
    id_number = id_number + fw //fw is either 1 or -1;
    var next_div = $('#ID_' + id_number + " div").get(0);
    var present_html = present_div.outerHTML;
    var next_html = next_div.outerHTML;
    present_div.outerHTML = next_html;
    next_div.outerHTML = present_html;   
}

使用
this
指定参数
el
，使用
1
或
-1
指定参数
fw
，具体取决于右侧或左侧

例如：
onclick=“arrow\u change（this，1）”
用于向右移位

演示：
这里是一个交换卡片/网格项的示例。我使用了您发布的html的简化版本。我假设您使用的是您使用的样式的引导，并将其包含在演示中。如果您想要一个不基于引导/jQuery的版本，请告诉我，我很乐意更新此版本

由于我使用的图像占位符服务经常返回给定大小的相同图像，因此我在卡头中包含了一个静态数字，允许您查看交换

我不鼓励通过更新属性或其他“文本”方法进行交换，因为如果您有事件处理程序，您将很难维护卡上的事件处理程序（例如，单击跟踪）

这种方法也不需要维护current、next和previous的概念，因为新的点击处理程序可以很容易地为您解决这个问题

我添加了一些额外的CSS来“隐藏”没有任何作用的箭头。您可以执行相同的操作或删除这些样式元素。代码仍然可以正确地使用这些元素

这里有一些类似的问题，您可能也感兴趣：






函数swapChildren（$parentA，$parentB）{
如果（$parentA.length==0 | |$parentB.length==0）{return；}
var$childrenA=$parentA.childrenA（）；
var$childrenB=$parentB.children（）；
$parentA.append（$childrenB）；
$parentB.append（$childrenA）；
}
$（.arrowLeft”）。在（“单击”，函数（）上{
var$parent=$（this）.closest（“.portfolio item”）；
swapChildren（$parent，$parent.prev（））；
});
$（.arrowRight”）。在（“单击”，函数（）上{
var$parent=$（this）.closest（“.portfolio item”）；
swapChildren（$parent，$parent.next（））；
})；
.portfolio item.thumboil{text align:center；}
.portfolio item.thumbnail>div{display:inline块；padding:0.5em；}
.glyphicon{字体大小：2em；颜色：红色；}
/*隐藏不起任何作用的箭头*/
.row.portfolio项：第一个子项.arrowLeft{display:none；}
.row.portfolio项：最后一个子项.arrowRight{display:none；}

1.
2.
3.
4.
5.
这里有一个可能的解决方案，可以使用普通javascript处理任意数量的图像：


//计算图像的数量
var figures=document.getElementsByTagName（'figures'）；
//为每个图像添加按钮
对于（变量i=0；i function arrow_change(el, fw) {
    var id = el.parentElement.parentElement.id;
    var id_number = eval(id.substr(3))
    var present_div = $('#ID_' + id_number + " div").get(0);//get(0) returns first DOM Element
    id_number = id_number + fw //fw is either 1 or -1;
    var next_div = $('#ID_' + id_number + " div").get(0);
    var present_html = present_div.outerHTML;
    var next_html = next_div.outerHTML;
    present_div.outerHTML = next_html;
    next_div.outerHTML = present_html;   
}