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

时间:2015-10-30 04:37:46

标签: javascript jquery html

我需要将除了div的div之外的所有div都包装起来,除了使用A类的div之外。还需要将它们保存在他们的父级中。

当前的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>"));
});

1 个答案:

答案 0 :(得分:1)

对每个li进行迭代,然后将其包裹在没有上课a的孩子身上。 wrapAll将包装所有可能匹配的元素,因此它还会包装来自其他li的匹配元素。

&#13;
&#13;
$('li').each(function() {
  $(this).children().not('.a').wrapAll('<div class="wrapped"></div>');
});
&#13;
.wrapped {
  color: green;
}
&#13;
<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>
&#13;
&#13;
&#13;