使用jQuery移动多个元素相对于另一个元素的位置答案

【问题标题】：Move multiple elements position relative to another element with jQuery使用jQuery移动多个元素相对于另一个元素的位置
【发布时间】：2016-09-13 13:56:38
【问题描述】：

我有多个以下元素：

<div class="item">
    <div class="image">Image</div>
    <div class="text">Text</div>
</div>

而我需要在 jQuery 中做的是交换它们，以便 text div 显示在 image div 之前。

使用 $('.text')insertBefore('.image') 可以正常工作 - 但是当我有多个 item div 时这不起作用。

都需要同时切换，有什么办法吗？

JSFiddle：https://jsfiddle.net/n2vnpd3n/

【问题讨论】：

标签： jquery switch-statement elements

【解决方案1】：

根据相邻元素迭代插入。

$("#switch").click(function() {
  // iterate over text
  $('.text').each(function() {
     // insert before the immediate previous sibling
     $(this).insertBefore($(this).prev());
     // or $(this).prev().before(this);
  });
});

$("#switch").click(function() {
  $('.text').each(function() {
    $(this).prev().before(this);
  });
});

body {
  background-color: #d6e6e9;
  font-family: Helvetica;
  text-align: center;
}
.item {
  margin-bottom: 10px;
}
.image {
  background-color: #87d6e6;
  padding: 30px;
}
.text {
  background-color: #fff;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="switch" value="Switch" />
<br />
<br />
<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

或者使用带有回调的before() 方法。

$("#switch").click(function() {
  // iterate over image and insert before
  $('.image').before(function() {
    // get the immediately next sibling element 
    return $(this).next()
  });
});

$("#switch").click(function() {
  $('.image').before(function() {
    return $(this).next()
  });
});

body {
  background-color: #d6e6e9;
  font-family: Helvetica;
  text-align: center;
}
.item {
  margin-bottom: 10px;
}
.image {
  background-color: #87d6e6;
  padding: 30px;
}
.text {
  background-color: #fff;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="switch" value="Switch" />
<br />
<br />
<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

【讨论】：

这可行，但假设“项目”块中没有其他 div。
完美！这正是我一直在寻找的。我知道使用 .prev() 是可能的，但没想到要迭代它！

【解决方案2】：

试试这个代码：

$("#switch").click(function(){
    $('.text').each(function(){
    $(this).insertBefore($(this).parent().find('.image'));
  });   
});

【讨论】：

【解决方案3】：

您可以遍历每个项目，然后进行切换。我已经修改了你的代码：

    $("#switch").click(function(){
     $('.item').each(function(i,e){
       $e = $(e);
       $e.find('.text').insertBefore($e.find('.image'));
     });
   });

还有小提琴：

https://jsfiddle.net/n2vnpd3n/2/

【讨论】：

【解决方案4】：

jQuery reversing the order of child elements 可能重复

sn-p 下面使用 jquery .each() 循环浏览您的 .items

$("#switch").click(function(){
	$('.item').each(function(){
    var list = $(this);
    var listItems = list.children();
    list.append(listItems.get().reverse());
  });
});

body {
  background-color: #d6e6e9;
  font-family: Helvetica;
  text-align: center;
}
.item {
  margin-bottom: 10px;
}
.image {
  background-color: #87d6e6;
  padding: 30px;
}
.text {
  background-color: #fff;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<input type="button" id="switch" value="Switch" />
<br />
<br />
<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

【讨论】：