jQuery 中令人困惑的 wrapAll答案

【问题标题】：Confusing wrapAll in jQueryjQuery 中令人困惑的 wrapAll
【发布时间】：2016-11-23 03:33:36
【问题描述】：

我在下面的几个 li 中有几个 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>');

但是，这似乎不起作用..我的意思是它所做的一切都需要所有 p 并包装它。我想在每个 li 中包含一个 div 吗？

【问题讨论】：

标签： javascript jquery html wrapall

【解决方案1】：

使用.each() 遍历每个<li>，然后操作其子<p>

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

Updated Fiddle

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

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

【讨论】：

【解决方案2】：

问题是，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>

【讨论】：