如何将元素集包装成div？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将元素集包装成div？相关的知识，希望对你有一定的参考价值。
我正在使用.wrap()和.wrapAll() jQuery，但我似乎无法找到操纵下面代码的解决方案。
我正在使用如此不太好的标记，我正在试图找出如何转换以下html：
<p class="category">Category 1</p>
<p class="item">Item</p>
<p class="item">Item</p>
<p class="item">Item</p>
<p class="category">Category 2</p>
<p class="item">Item</p>
<p class="item">Item</p>
<p class="item">Item</p>
<p class="category">Category 3</p>
<p class="item">Item</p>
<p class="item">Item</p>
<p class="item">Item</p>进入：
<div class="category-1">
<p class="category">Category 1</p>
<p class="item">Item</p>
<p class="item">Item</p>
<p class="item">Item</p>
</div>
<div class="category-2">
<p class="category">Category 2</p>
<p class="item">Item</p>
<p class="item">Item</p>
<p class="item">Item</p>
</div>
<div class="category-3">
<p class="category">Category 3</p>
<p class="item">Item</p>
<p class="item">Item</p>
<p class="item">Item</p>
</div>我需要从一个.category换到下一个。我不需要包装每个部分的div必须是类别名称，我只是为这个问题命名。
答案
迭代.category，然后通过升级到下一个.category元素来包装元素。
$('.category').each(function(i) {
$(this)
// get element up to the next `.category`
.nextUntil('.category')
// in case there is any other element as the sibling
// then only get the paragraph element using
// .filter('p.item')
// add the current element to the object
.add(this)
// wrap it using the div
.wrapAll($('<div/>', {
class: 'category' + (i + 1)
}))
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p class="category">Category 1</p>
<p class="item">Item</p>
<p class="item">Item</p>
<p class="item">Item</p>
<p class="category">Category 2</p>
<p class="item">Item</p>
<p class="item">Item</p>
<p class="item">Item</p>
<p class="category">Category 3</p>
<p class="item">Item</p>
<p class="item">Item</p>
<p class="item">Item</p>
</div>以上是关于如何将元素集包装成div？的主要内容，如果未能解决你的问题，请参考以下文章