2

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

我创建了一个示例：

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

4

5 回答 5

4

您需要预先标记每个<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/工作演示

于 2012-07-23T13:08:46.820 回答
3

我的方法只是使用 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();

});
于 2012-07-23T13:13:47.503 回答
2

尝试添加一些属性或.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/

于 2012-07-23T13:14:59.617 回答
0

您可以使用重新包装它们.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：原创

于 2012-07-23T13:09:40.717 回答
0

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

于 2012-07-23T13:11:30.607 回答