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()因为我需要使用像article:first-child这样的CSS类。

Here is an exemple

Answer 1

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

如果您准备在网站上要求使用Javascript，只需使用.show()和.hide()，然后使用jQuery而不是静态CSS为第一个{{1}分配类或CSS属性孩子。

:visible

请参阅http://jsfiddle.net/alnitak/tJBjX/

jQuery分离并按顺序重新附加

1 个答案: