移動HTML標記了使用jQuery

Question

兩個層面，我有以下HTML佈局

<div id="wizard-step-content" class="wizard-step-content row-fluid"> 
    <div id="accordion"> 
     <div> 
      <article class="orderwizard-module orderwizard-module-proxy-addresses-opc"> 
       <h3 class="section-header">Enter Shipping Address</h3> 
       <article class="orderwizard-module orderwizard-module-proxy-addresses-opc module-rendered"> 
        other tags 
      </article> 
      </article> 
     </div> 
     <div> 
      <article class="orderwizard-module orderwizard-payment"> 
       <article class="orderwizard-module orderwizard-module-payment"> 
        other tags no H3 
       </article> 
       <h3 class="section-header">Enter Payment</h3> 
       <article class="orderwizard-module orderwizard-module-payment"> 
        other tags 
       </article> 
      </article> 
     </div> 
    </div> 
</div> 

我需要做的是移動H3標籤了兩個級別是DIV手風琴和股利之間。問題是我在手風琴標籤下有幾個不只一個。這些都在相同的層次結構下，但有些在第一個H＃之前有其他標籤。我只想移動我發現的第一個H3標籤，如果有多個標籤，我只想移動第一個標籤。請幫忙。

這段代碼是由一個單獨的進程自動生成的，所以我不能只是去修改它來渲染它在不同的地方。

我有這個腳本可以使用，但它將H315標籤放在<div id="accordion"> 標籤的底部，但它的順序不正確。

$('#accordion').children('div').children('article').each(function() { $('article h3:first-child').detach().appendTo($(this).parent().parent())}); 

Answer 1

如果我正確理解您的需求，與您現有的代碼的問題是，它針對所有匹配artcles的第一H3，而不僅僅是相關H3每個文章。

試試這個：

$('#accordion > div > article').each(function() { 
    $(this).find('h3').insertBefore($(this).parent()) 
}); 

的jsfiddle：http://jsfiddle.net/TrueBlueAussie/pkfpswbq/1/

注：

• 當移動在DOM元素，你不需要首先分離他們。