jQuery：将div围绕p not：div内的第一个元素

Question

我一直在努力解决这个问题，但似乎再也无法思考了。 我有这样的结构：

<div id="team-101">
   <p>Description 1</p>
   <p>Description 2</p>
   <p>Description 3</p>
   <p>Description 4</p>
   <ul><li>Some stuff</li></ul>
</div>
<div id="team-202">
   <p>Description 1</p>
   <p>Description 2</p>
   <p>Description 3</p>
   <p>Description 4</p>
   <ul><li>Some stuff</li></ul>
</div>

（等）我想做的是将倒数第二个文本段落放入div中，然后可以在每个主要div中隐藏/取消隐藏：

<div id="team-101">
   <p>Description 1</p>
   <div id="desc-101">
      <p>Description 2</p>
      <p>Description 3</p>
      <p>Description 4</p>
   </div>
   <ul><li>Some stuff</li></ul>
</div>

我尝试了一些

$('div[id^=team-]').each(function() {
    $('p:first', this).after('<div>');
    $('p:last', this).after('</div>');

但是开头的div随后会自动关闭，并且不包含以下段落。 这可能是儿童游戏，我太傻了。

Answer 1

DOM不能这样工作，您不能单独插入开始和结束标记，可以选择p .wrapAll() ，并使用.wrapAll()方法用DIV元素包装所有.wrapAll() ：

$('div[id^=team-]').each(function() {
    var n = this.id.replace('team-', '');
    $(this).children('p').slice(1).wrapAll('<div id="desc-'+n+'"/>');
});

http://jsfiddle.net/D7QMe/

Answer 2

定位段落，排除第一个段落，然后用wrapAll包裹它们

$('div[id^=team-]').each(function() {
    $('p:not(:first)', this).wrapAll('<div id="'+this.id.replace('team','desc')+'" />')
});

小提琴