我正在使用.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>
&#13;
进入这个:
<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>
&#13;
我需要从一个.category
换行到下一个make_unique
。我不需要包装每个部分的div必须是类别名称,我只是为这个问题命名。
答案 0 :(得分:5)
迭代.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)
}))
})
&#13;
<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>
&#13;