如何将所有元素包装在每个容器中

How to wrap all elements in each container

本文关键字：包装 元素      更新时间：2023-09-26

我需要包装除带有类A的div之外的所有li的子级div。还需要将它们保存在其父级li中。

当前html:

<ul class="container">
 <li>
  <div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
 </li>
 <li>
  <div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
 </li>
</ul>

期望输出：

<ul class="container">
 <li>
  <div class="a"></div>
   <div class="wrapped">
    <div class="b"></div>
    <div class="c"></div>
   </div>
 </li>
 <li>
   <div class="a"></div>
     <div class="wrapped">
       <div class="b"></div>
       <div class="c"></div>
     </div>
 </li>
</ul>

本以为这个代码可以做到，但它不起作用。我想用一个变量来定义所选的div：

var selected = $("li").children().not(".a");
$(selected).each(function() {
    $(selected).wrapAll($("<div class='wrapped'></div>"));
});

在每个li上迭代，然后包装它的没有类a的子级。wrapAll将包装所有可能的匹配元素，因此它也将包装来自其他li的匹配元素。

$('li').each(function() {
  $(this).children().not('.a').wrapAll('<div class="wrapped"></div>');
});
.wrapped {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="container">
  <li>
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="b">B</div>
  </li>
  <li>
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="b">B</div>
  </li>
</ul>

相关文章：