jquery - jQuery按顺序分离和重新附加

Question

我需要在我的页面上分离一些元素，然后以与之前相同的顺序重新附加它们。下面的代码完成了分离然后重新连接的工作，但给了我不同的顺序。

$("button").toggle(
    function () {        
        p = $('article').not('.1').detach();

        $(this).text("ON");
    },
    function () {
        p.appendTo("section");
        p = null;

        $(this).text("OFF");
    }
);

<button type="button">OFF</button>

<section>
    <article class="2 3">2 3</article>
    <article class="2 3 4">2 3 4</article>
    <article class="1 4 5">1 4 5</article>
    <article class="1 3 5">1 3 5</article>
    <article class="3 4 5">3 4 5</article>
</section>

我不能只使用.hide()并且.show()因为我需要使用一些 CSS 类，比如article:first-child.

这是一个例子

Answer 1

记住关于一组未知元素在 DOM 中的位置的大量状态确实不太实际。

如果您准备在站点上使用 Javascript，只需使用.show()然后.hide()使用 jQuery 而不是静态 CSS 将类或 CSS 属性分配给第一个:visible孩子。

var state = false;

$("button").on('click', function () {
    var $a = $('article');

    state = !state;
    var fn = state ? 'hide' : 'show';
    $a.not('.1')[fn]();  // calls 'hide' or 'show' depending on state

    $a.removeClass('highlight').filter(':visible').first().addClass('highlight');
});

见http://jsfiddle.net/alnitak/tJBjX/