jQuery - 関連要素の移動

Question

ページの読み込み時に、ヘッダースパンをdivに折り返し、関連するbody divの前に移動したいとします。 つまりhApplicant1 spanをtabApplicant1 divなどの先頭に移動します。

これを行うにはどうすればよいですか？ありがとう！

は考える：

<div> 
      <div id="header"> 
       <span id="hDummy"></span> 
       <span id="hApplicant1">James Smith</span> 
       <span id="hApplicant2">John Doe</span> 
       <span id="hApplicant3"></span> 
       <span id="hApplicant4"></span> 
      </div> 
      <div id="body"> 
       <div id="tabApplicant1">...</div> 
       <div id="tabApplicant2">...</div> 
      </div> 
</div> 
<div> 
      <div id="header2"> 
       <span id="h2Dummy"></span> 
       <span id="h2Applicant1">Black Smith</span> 
       <span id="h2Applicant2">Shoe Maker</span> 
       <span id="h2Applicant3"></span> 
       <span id="h2Applicant4"></span> 
      </div> 
      <div id="body2"> 
       <div id="tab2Applicant1">...</div> 
       <div id="tab2Applicant2">...</div> 
      </div> 
</div> 

結果は次のようにする必要があります：

<div> 
      <div id="header"> 
       <span id="hDummy"></span> 
       <span id="hApplicant3"></span> 
       <span id="hApplicant4"></span> 
      </div> 
      <div id="body"> 
       <div><span id="hApplicant1">James Smith</span></div> 
       <div id="tabApplicant1">...</div> 
       <div><span id="hApplicant2">John Doe</span><div> 
       <div id="tabApplicant2">...</div> 
      </div> 
</div> 
<div> 
      <div id="header2"> 
       <span id="h2Dummy"></span> 
       <span id="h2Applicant3"></span> 
       <span id="h2Applicant4"></span> 
      </div> 
      <div id="body2"> 
       <div><span id="h2Applicant1">Black Smith</span></div> 
       <div id="tab2Applicant1">...</div> 
       <div><span id="h2Applicant2">Shoe Maker</span><div> 
       <div id="tab2Applicant2">...</div> 
      </div> 
</div> 

Answer 1

var $bodyDiv = $('#body'); 

$('#header span[id^=hApplicant]').each(function(){ 
    $bodyDiv.find('div[id=' + $(this).attr('id').replace('h', 'tab') + ']').before($(this).wrap('<div />').parent()); 
}); 

そして、ここではフィドルです：http://jsfiddle.net/Hw2Gz/

は、これがさらに簡素化（および最適化）することができ、あなたが正しい道を歩み始めるはずです。

---

EDIT：これを繰り返すことができる

：

var $bodyDiv = $('#body'), 
    $bodyDiv2 = $('#body2'); 

$('#header span[id^=hApplicant]').each(function(){ 
    $bodyDiv.find('div[id=' + $(this).attr('id').replace('h', 'tab') + ']').before($(this).wrap('<div />').parent()); 
}); 

$('#header2 span[id^=h2Applicant]').each(function(){ 
    $bodyDiv2.find('div[id=' + $(this).attr('id').replace('h', 'tab') + ']').before($(this).wrap('<div />').parent()); 
}); 

http://jsfiddle.net/Hw2Gz/1/

Answer 2

$('#header span').each(function() { 
     var that = $(this); 
     var thatId = that.attr('id'); 
     var bodyDiv = $('#body #' + thatId.replace('h', 'tab')); 
     if (bodyDiv.length) 
      that.insertBefore(bodyDiv).wrap('<div/>'); 
    }); 

http://jsfiddle.net/cJtZc/3/