Question

手风琴我有以下问题。我有一对外部容器“accordion”的元素，但我需要用另一个容器包装每一对。据我所知，我之前无法包装它们，因为手风琴不起作用。

所以我需要在domready之后用一个额外的片段包装它们......

我明白了：

<div id="accordion">
    <h2 class="head">Headline</h2>
    <div class="content">Some content...</div>
    <h2 class="head">Headline</h2>
    <div class="content">Some content...</div>
 ....more pairs
</div>

我需要这个：

<div id="accordion">
<div class="outer">
    <h2 class="head">Headline</h2>
    <div class="content">Some content...</div>
</div>
<div class="outer">
    <h2 class="head">Headline</h2>
    <div class="content">Some content...</div>
</div>
...more pairs
</div>

我以为这会完成这项工作：

$('.head').before('<div class="outer">');
$('.content').after('</div>');

...但它会在每个标题之前插入已经关闭的div。

Answer 1

您只能使用before()和after()等方法插入整个元素。

实现目标的一种方法是在每个<h2> / <div>对上拨打wrapAll()，使用类似nextUntil()的内容来匹配对：

$("#accordion h2").each(function() {
    $(this).nextUntil("h2").andSelf().wrapAll("<div class='outer'></div>");
});

Answer 2

试试这个

  $('.head:first,.content:first').wrapAll('<div class="outer">');
  $('.head:last,.content:last').wrapAll('<div class="outer">');

JSFiddle Example

如何用外部容器包装手风琴？

2 个答案: