jQuery Reverse Unwrapping [关闭]

Question

在我的页面上，我有一个按钮，从它的容器中打开所有<article>，之后将每个包装分别装入<section>。我的问题是，是否可以通过单击按钮来反转该操作，以便所有<article>将重新组合回到他们在开始时的相同位置？

我创建了一个例子：

http://jsfiddle.net/JCERK/9/

Answer 1

我的方法只使用jQuery .clone();方法。

参考：jsFiddle

jQuery代码：

var oldWrap = $('#wrapper').clone();


$('#unwrap').click(function() {
    $('article').unwrap();
    $('article').wrap('<section></section>');
});

$('#wrapback').click(function() {

    $('#wrapper').replaceWith(oldWrap);
    oldWrap = $('#wrapper').clone();

});

Answer 2

你需要预先标记你的每个<article>标签上的东西，以确定他们所在的<section>。把它放在他们的class将是一个好主意，例如：

$('article').addClass(function() {
    return 'section-' + $(this).parent().index();
});

当你将它们包起来时，你需要通过class对它们进行分组。

$('#wrapback').click(function() {
    $('article').unwrap();
    for (var i = 0; i < sections; ++i) {
        var articles = $('article.section-' + i);
        articles.wrapAll('<section/>');
    }
});​

在http://jsfiddle.net/alnitak/QKLkV/工作演示

Answer 3

尝试添加一些属性或.data到每个article分组，然后使用.wrapAll。

也许最简单的方法是使用addClass和.each循环的索引，因为你可以快速找到给定类的所有articles并将它们包装在一起。

一个实现：

$('#unwrap').on('click', function() {
    $('section').each(function(i, el) {
        $(this).find('article').addClass('_index_'+i).unwrap();
    });
    $('article').wrap('<section></section>');
});

$('#wrapback').on('click', function() {
    var idx = 0;
    while ($('article._index_' + idx).length) {
        $('article._index_' + idx).unwrap().wrapAll('<section>');
        idx += 1;
    };
});​

http://jsfiddle.net/mblase75/JCERK/14/

Answer 4

jquery.wrapAll()是你需要的，但你必须区分每组文章（比如将它们包装在div中），否则wrapAll方法将把你所有的文章包装在一个section中

Answer 5

你可以使用.wrapAll重新包装它们。

基本代码是这样的：

但是：ぁzxswい

jQuery的：

http://jsfiddle.net/SO_AMK/UhWqa/

HTML：原创

CSS：原创