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

Question

我有多个以下元素：

public class Test
{
    static Dictionary<Type, IHandler> delegates = new Dictionary<Type, IHandler>();

    public static void Write(MemoryStream s, object value)
    {
        IHandler handler;

        var type = value.GetType();
        if (!delegates.TryGetValue(type, out handler))
        {
            handler = (IHandler)typeof(HandlerFactory).GetMethod(nameof(HandlerFactory.Create)).MakeGenericMethod(type).Invoke(null, null);
            delegates[type] = handler;
        }

        handler.Write(s, value);
    }
}

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

使用 $（'。text'）insertBefore（'。image'）可以正常工作 - 但是当我有多个 item div时，这不起作用。< / p>

他们都需要同时切换，有没有办法做到这一点？

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'));
     });
   });

小提琴：

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>