包含多個項目的JQuery UI Accordion

Question

我在一個我無法控制的框架上編碼，因此需要解決正在生成的限制。

我正在嘗試做一個jQuery UI手風琴，但需要手風琴包括頭後面的兩個元素，而不僅僅是一個。

例如，代碼被吐出來的（在中間一堆刪除）：

<h2>HEADER</h2> 
<div>ITEM DESCRIPTION</div> 
<fieldset> 
    <legend>Prices</legend> 
    <div class="prices"> 
     <div class="productline" ><label>Price:</label> 
        <div class="amount">$97.50</div></div> 

    </div> 
</fieldset> 

這一切都需要進入單手風琴項目，但此刻的手風琴使用H2作爲標題，將描述作爲手風琴內容的div，然後將字段放置在手風琴之外。由於我無法控制生成的代碼將它們都包裝在div中，有沒有辦法告訴手風琴使用頭後的兩個項目，而不是一個？

我使用jQuery是：

$(function() { 
    $(".productindex").accordion({ 
     active: false, 
     collapsible: true, 
     autoHeight: true, 
     header: 'li>form>h2' 
    }); 
}); 

爲了進一步複雜的事情，有些項目沒有說明，因此，如果任何腳本可以容納字段集之前的初始格可能不存在，這將很棒 - 但最壞的情況下，我可以確保每件物品都有說明。

感謝您的幫助！

Answer 1

根據我的初步評論，您可以抓住所有需要「手風琴內容」的東西，並將其全部包裝在合適的元素中，以便手風琴功能發揮作用。

這將需要了解HTML的周圍結構，以便決定用於抓取這些元素的最佳選擇器。讓我們想象一下，你的結構，有點象演示了jQuery UI網站，除非你的不變的標記，而不是一個div：

<h2>HEADER</h2> 
<div>ITEM DESCRIPTION</div> 
<fieldset> 
    <legend>Prices</legend> 
    <div class="prices"> 
     <div class="productline" > 
      <label>Price:</label> 
       <div class="amount">$97.50</div> 
     </div> 
    </div> 
</fieldset> 

<h2>HEADER</h2> 
// whoops, no description! 
<fieldset> 
    <legend>Prices</legend> 
    <div class="prices"> 
     <div class="productline" > 
      <label>Price:</label> 
       <div class="amount">$105.50</div> 
     </div> 
    </div> 
</fieldset> 

我們可以使用h2節點作爲我們選擇的切入點。你真正想要做的是選擇所有可用的東西，直到下一個h2（它也將在DOM樹的分支中不再有h2時結束）。根據這種選擇的性質，如果您有物品描述或其他元素，則無關緊要。然後我們在所有找到的元素周圍添加一個新的包裝。

我不知道這是最良好分解代碼（人不普遍喜歡使用.each()但我覺得它方便在這裏），但這裏是我想出了：

var headers = $('h2'); 
headers.each(function() { 
    var toWrap = $(this).nextUntil('h2'); 
    toWrap.wrapAll('<div class="wrapped" />'); 
}); 

從jQuery UI的文檔來看，你不需要在包裝的div任何類，我只是一個包含促進這種示範的jsfiddle：

演示

：http://jsfiddle.net/StUWc/1/

只是爲了被徹底的緣故，後wrapA LL功能，您的DOM變成東西，可以通過這個標記來表示：

<h2>HEADER</h2> 
<div class="wrapped"> 
    <fieldset> 
    <legend>Prices</legend> 
    <div class="prices"> 
     <div class="productline" > 
      <label>Price:</label> 
       <div class="amount">$97.50</div> 
     </div> 
    </div> 
    </fieldset> 
</div> 

<h2>HEADER</h2> 
<div class="wrapped"> 
    <fieldset> 
    <legend>Prices</legend> 
    <div class="prices"> 
     <div class="productline" > 
      <label>Price:</label> 
       <div class="amount">$105.50</div> 
     </div> 
    </div> 
    </fieldset> 
</div>