javascript - jQuery wrapAll 类别 1、类别 2 等

Question

我希望能够在父元素中包装多个具有相同类（例如 category-1）的元素。我知道这可以用jQuery wrapAll(). 那里没问题。
但是我想要做的是用 class 包装所有元素"category-X"，其中 X 是我自己选择的数字。
我要创建一个数组吗？或者我该怎么走？

Answer 1

不， wrapAll() 方法包装了您只需要使用 wrap() 方法的所有类别：

var num = 10; //specify how many here ???
for(var i=0; i<num; i++){
    $('.category').wrap('<div class="category-' + i + '" />');
}

Answer 2

一种可能性，不像调用那么简单wrapAll()，是：

$('[class^="category-"]').each(function(){
    var n = this.className.replace('category-',''),
        container = $('.container-' + n).length ? $('.container-' + n) : $('<div />', {
            'class' : 'container-' + n
        }).appendTo(this.parentNode);
    $(this).appendTo(container);
});

JS 小提琴演示。

参考：

• jQuery：
  • appendTo().
  • 属性以 ( [attribute^="value"]) 开头的选择器。
  • each().
• '普通' JavaScript：
  • String.replace().