Question

I have some inputs in divs. It seems like below:

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

But in some cases, I need to change the order of inputs. Specifically, I want to swap emails and phones locations. Result must be:

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

To achieve my goal I write jquery code:

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

This code swapped whole phoneInputs divs before each emailInputs divs. How can I swap divs one by one? (The count of the inputs is unkown)

Also,

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

doesnt work.

Answer 1

Try this:

$('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/

You can also change the position of the div tags.

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