我有以下的标记。
<div id="parent">
<div class="special child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="special child"></div>
<div class="special child"></div>
<div class="special child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
我需要做的是提取2个子集合的内容 div.special
(对于相邻的2组兄弟姐妹),然后用另一个父代包住每个组,最后得到。
<div id="parent">
<div class="special_parent">
<div class="special child"></div>
</div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="special_parent">
<div class="special child"></div>
<div class="special child"></div>
<div class="special child"></div>
</div>
<div class="child"></div>
<div class="child"></div>
</div>
我可以先从兄弟姐妹元素开始迭代,然后做一些繁琐的工作 但我觉得应该有一个更优雅的方法。
使用... each()
和 nextUntil()
$('.special').each(function() {
if ($(this).parent().hasClass('special_parent')) return
$(this)
.nextUntil(':not(.special)')
.add(this)
.wrapAll('<div class="special_parent">')
})
.special_parent {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div class="special child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="special child">5</div>
<div class="special child">6</div>
<div class="special child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="special child">10</div>
<div class="special child">11</div>
</div>