0

我有一个 h5 的列表：

<div id="accordion"><h5>One</h5>
<p>Lorem ipsum dolor sit amet</p>
<h5>Two</h5>
<p>Lorem ipsum dolor sit amet.</p>
<h5>Three</h5>
<p>Lorem ipsum dolor sit amet</p>
<h5>Four</h5>
<p>Lorem ipsum dolor sit amet</p>
<h5>Five</h5>
<p>Lorem ipsum dolor sit amet</p></div>

我想使用 jQuery UI 手风琴将它们变成手风琴，它将第一个元素作为包含，所以我想在每个 h5 之间包装内容。如果我使用 .after() 和 .before() 它会同时获取 的结束标签和开始标签，</h5>我也不知道如何让第一个元素不在其上方插入结束标签：

到目前为止我所拥有的显然不起作用：

var insert = true;
$("#accordion h5").each(function(event) {
    // All of them have a div immediatly after it.
    $(this).after("<div>");
    if (insert === true) {
        insert = false;
    } else {
        $(this).before("</div>");
    }
});

澄清一下，我的输出我想看起来像这样，但并不总是有 p 标签，因为它可以是任何内容。

<div id="accordion">
<h5>One</h5>
<div><p>Lorem ipsum dolor sit amet</p></div>
<h5>Two</h5>
<div><p>Lorem ipsum dolor sit amet.</p></div>
<h5>Three</h5>
<div><p>Lorem ipsum dolor sit amet</p></div>
...
</div>
4

4 回答 4

0

您需要包装功能：

$("#accordion h5").wrap('<div />');

文档：http ://api.jquery.com/wrap/

于 2012-11-22T08:10:05.190 回答
0

使用这个选择器来获取除第一个之外的所有 h5：

$('#accordion h5:not(:first)')
于 2012-11-22T08:11:32.190 回答
0

认为这就是你想要的：

$('#accordion > h5').each(function() {
    $(this).nextUntil('h5').wrapAll('<div/>');
});

这会将每个内容之间的所有内容包装h5在一个div

这是一个小提琴

编辑

div要在没有内容时插入 a ，只需添加一个简单的条件，例如：

$this = $(this); 
if ($this.next('h5').length) {
  $this.after('<div/>');
} else {
  $this.nextUntil('h5').wrapAll('<div/>');
}

这基本上是说如果下一个元素是 a h5（即没有内容），则插入一个空的div，否则将所有内容包装到 a 中的下h5一个div。

于 2012-11-22T08:17:54.190 回答
0

您可以在每个函数中使用 .not() 选择器，然后在 .not() 内部使用 :eq(0) 选择器，0 是第一个元素的索引。在你的情况下：

$("#accordion h5").not(':eq(0)').each(function(event) {
    //your code
});

希望能帮助到你

于 2012-11-22T08:18:20.543 回答