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()方法将所有子项包装为DIV元素：< / p>

$('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')+'" />')
});

FIDDLE

jQuery：在div周围包裹一个div：div中的第一个元素

2 个答案: