包含多个项目的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>