jQuery分離並按順序重新連接

我需要分離頁面上的某些元素，然後按照它們之前的順序重新附加它們。下面的代碼做了分離然後重新連接的工作，但是給了我不同的順序。jQuery分離並按順序重新連接

$("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。

Here is an exemple

來源

2013-07-23 user2611080

'.toggle（FN1，FN2）'已經過時 – Alnitak

作爲附加側面說明什麼@Alnitak說，'.toggle（）'被棄用的jQuery 1.8和jQuery中刪除1.9 [api文檔]（http://api.jquery.com/toggle-event/）。 – War10ck

這真的不是很實用記住了很多國家的有關未知元素集合在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/

來源

2013-07-23 15:20:25 Alnitak

jQuery分離並按順序重新連接

回答

相關問題