我需要将除了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>"));
});
答案 0 :(得分:1)
对每个li
进行迭代,然后将其包裹在没有上课a
的孩子身上。
wrapAll
将包装所有可能匹配的元素,因此它还会包装来自其他li
的匹配元素。
$('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;