jQuery - 移動相關元素

在頁面加載時，我想用div包裝標題範圍並將其移動到相關的body div的前面。即，將hApplicant1 span移動到tabApplicant1 div等的前面jQuery - 移動相關元素

如何編寫jQuery來完成此操作？謝謝！

考慮：

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

來源

2011-09-08 nandin

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/

這可以進一步簡化（優化），但它應該讓你開始正確的軌道。

編輯：

這可以重複：

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/

來源

2011-09-08 19:32:27

顧我們有同樣的想法。只是想知道，你的最後是什麼.parent（）？ –

@Joseph：我修改了我的問題，它現在有兩個重複的容器div。你能幫助解決這個難題嗎？謝謝！ – nandin

@Richard D - 檢查您生成的代碼。 'span [id^= hApplicant]'不包含在'div's中。這是因爲他們被留在'＃頭文件中。 –

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

來源

2011-09-08 19:38:07

+1現在你很好。 –

jQuery - 移動相關元素

回答

相關問題