Question

我有一个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 accordion将它们变成手风琴，它将第一个元素作为包含，所以我想在每个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>

Answer 1

你需要包装功能：

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

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

Answer 2

使用此选择器以获取所有h5，但第一个：

$('#accordion h5:not(:first)')

Answer 3

认为这就是你想要的：

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

将h5

中的每个div之间的所有内容包装起来

Here's a fiddle

修改

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

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

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

Answer 4

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

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

希望有所帮助

在标题之前和之后插入元素，第一个标题除外

4 个答案: