混淆wrapAll中的jQuery

Question

我在几个里有几个p，如下所示，同时也是https://jsfiddle.net/y5zn538e/

​

<ul>
  <li>
    <p> Hello 1</p>
    <p> Hello 2</p>
    <p> Hello 3</p>
  </li>
  <li>
    <p> Hello 4</p>
    <p> Hello 5</p>
    <p> Hello 6</p>
  </li>
</ul>

​

我想包装一个div，这样它的包装就像下面的第二个。

​

<ul>
  <li>
    <p> Hello </p>
    <div>
      <p> Hello </p>
      <p> Hello </p>
    </div>
  </li>
  <li>
    <p> Hello </p>
    <div>
      <p> Hello </p>
      <p> Hello </p>
    </div>
  </li>
</ul>

​

我试过如下：

 $('ul li >p:not(:first-child)').wrapAll('<div></div>'); 

然而，这似乎不起作用。我的意思是，它所做的一切，都要把它包起来。我想要在每一个里包扎一个div？

Answer 1

问题是，li > p:not(:first-child)收集除第一个子标记之外的所有子p标记。 因此，您需要使用.each()函数迭代所有li。

$('ul li').each(function(){
  $(this).find('p:not(:first-child)').wrapAll('<div></div>'); 
});

​

  $('ul li').each(function(){
     		$(this).find('p:not(:first-child)').wrapAll('<div></div>'); 
     });

div{
  color: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
      <li>
         <p> Hello 1</p> 
         <p> Hello 2</p > 
         <p> Hello 3</p> 
      </li> 
      <li>
         <p> Hello 4</p> 
         <p> Hello 5</p > 
         <p> Hello 6</p> 
      </li> 
     </ul>

​

Answer 2

使用.each()对每个<li>进行迭代，然后操作其子级<p>

$('ul li').each(function(){
    $('> p:not(:first-child)',this).wrapAll('<div/>');
});

更新Fiddle

为什么你的代码不起作用？

$('ul li >p:not(:first-child)')获取所有<p>的集合，这些<p>不是其父级的第一个子级。然后将它们封装在<div>中。此集合不考虑单独的<li>父级。