Развертывание jQuery Reverse

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

Вы можете перемотать их, используя .wrapAll,

Основной код будет таким:

Демо: http://jsfiddle.net/SO_AMK/UhWqa/

JQuery:

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

HTML: оригинал

CSS: оригинал

Answer 5

http://api.jquery.com/wrapAll/ - это то, что вам нужно, но вам придется различать каждую группу статей (например, оборачивать их в div), иначе wrapAll метод обернет все ваши статьи в один section