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

Question

我有多个以下元素：

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

而我需要在 jQuery 中做的是交换它们，以便 text div 显示在 [=23= 之前]图片 div.

使用 $('.text')insertBefore('.image') 效果很好 - 但是当我有多个 item 时这不起作用 divs.

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

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

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

Answer 2

试试这个代码：

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

Answer 3

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

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

和 Fiddle:

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

Answer 4

可能与 jQuery reversing the order of child elements

重复

下面的片段使用 jquery .each() 循环浏览你的 .item

$("#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>

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

Move multiple elements position relative to another element with jQuery

jquery

elements

switch-statement