jquery - 替换 div（交换 div）

Question

我在 div 中有一些输入。如下所示：

<div name="emailInput">
      <input type="text" name="email_1" /></div>
<div name="phoneInput">
      <input type="text" name="phone_number_1"   /></div>

<div name="emailInput">
      <input type="text" name="email_2"   /></div>
<div name="phoneInput">
      <input type="text" name="phone_number_2" /></div>

<div name="emailInput">
      <input type="text" name="email_3"  /></div>
<div name="phoneInput">
      <input type="text" name="phone_number_3" /></div>

但在某些情况下，我需要更改输入的顺序。具体来说，我想交换电子邮件和电话位置。结果必须是：

<div name="emailInput">
      <input type="text" name="phone_number_1" /></div>
<div name="phoneInput">
      <input type="text" name="email_1"   /></div>

<div name="emailInput">
      <input type="text" name="phone_number_2"   /></div>
<div name="phoneInput">
      <input type="text" name="email_2" /></div>

<div name="emailInput">
      <input type="text" name="phone_number_3"  /></div>
<div name="phoneInput">
      <input type="text" name="email_3" /></div>

为了实现我的目标，我编写了 jquery 代码：

$('div[name^= emailInput]').insertBefore('div[name^= phoneInput]');

此代码在每个 emailInputs div 之前交换了整个 phoneInputs div。我怎样才能一个一个地交换div？（输入的数量未知）

还，

  $('input[name^= email]').insertBefore('input[name^= phone_number]');

不工作。

Answer 1

我没有试过这个..但我认为它应该是这样的：

$('div[name=^ emailInput]').each(obj, function(i, val) {
      obj.insertBefore('div[name^= phoneInput]');

    });

Answer 2

您需要单独操作它们，而不是整个选择器组。

 $('div[name^="emailInput"]').each(function(){
      var previousPhoneInput = $(this).prev("div[name^='phoneInput']");
      $(this).remove().insertBefore(previousPhoneInput);
    });

Answer 3

试试这个：

$('input[name^="phone_number"]').each(function(){
   var $this = $(this);
   var $prev = $this.parent().prev()
   $prev.find('input').insertAfter($this);
   $this.appendTo($prev)    
})

http://jsfiddle.net/PnT4Q/1/

您还可以更改 div 标签的位置。

$('div[name="phoneInput"]').each(function(){
  var $this = $(this);
  $this.insertBefore($this.prev())   
})