如何按文本內容的字母順序對元素進行排序，並在存在的情況下引入下一個 div？

Question

我有一個菜單，我想按字母順序排序。 我發現了這個： Sort DIVs alphabetically without destroying and recreating them?

我將 jQuery 腳本應用於“排序”。 效果很好。 唯一合乎邏輯的問題是隱藏的 div（類：隱藏）不跟隨，它們通過單擊“btn_expand”並切換下一個 div 來顯示/隱藏。

我嘗試了一些不同的方法來開發腳本，但我沒有找到任何好的解決方案。 最終得到一堆代碼和混亂的結果。 它應該像下一個 div hasClass“隱藏”然后“帶上它”並在“btn_expand”之后追加一樣解決，但我失敗了。 有更多技能的人可以幫忙嗎，這會讓我開心。 :)

謝謝！

 $('.sort').sort(function(a, b) { if (a.textContent < b.textContent) { return -1; } else { return 1; } }).appendTo('body'); $(".btn_expand").on('click', function() { $(this).next("div").toggle(); });

 .btn_expand { background: red; }.hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Without sorting</p> <div class="btn_expand">CCC</div> <div class="hidden">Hidden content shown by press CCC</div> <div class="btn_no_expand">EEE</div> <div class="btn_no_expand">AAA</div> <div class="btn_no_expand">DDD</div> <div class="btn_expand">BBB</div> <div class="hidden">Hidden content shown by press BBB</div> <br><br> <p>With sorting</p> <div class="btn_expand sort">CCC</div> <div class="hidden">Hidden content shown by press CCC</div> <div class="btn_no_expand sort">EEE</div> <div class="btn_no_expand sort">AAA</div> <div class="btn_no_expand sort">DDD</div> <div class="btn_expand sort">BBB</div> <div class="hidden">Hidden content shown by press BBB</div>

Answer 1

您可以排序，然后對於每個匹配的元素，檢查下一個兄弟是否具有類.hidden ，如果是，則將其添加到選擇器，然后附加到正文：

 $('.sort').sort(function(a, b) { if (a.textContent < b.textContent) { return -1; } else { return 1; } }).each((index, el) => { const hidden = $(el).next(); if (hidden.hasClass('hidden')) { $(el).add(hidden).appendTo('body'); } else { $(el).appendTo('body'); } }); $(".btn_expand").on('click', function () { $(this).next("div").toggle(); });

 .btn_expand{background:red;}.hidden{display: none;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="btn_expand sort">CCC</div> <div class="hidden">Hidden content shown by press CCC</div> <div class="btn_no_expand sort">EEE</div> <div class="btn_no_expand sort">AAA</div> <div class="btn_no_expand sort">DDD</div> <div class="btn_expand sort">BBB</div> <div class="hidden">Hidden content shown by press BBB</div>

Answer 2

或者，以更短的形式，您可以這樣做：

 function sortBlock(sel){ const block=$(sel); $('.sort', block).sort((a, b)=>a.textContent.localeCompare(b.textContent)).each((i,el)=>$(el).add($(el).next(".hidden")).appendTo(block)); } sortBlock("#two"); $(".btn_expand").on('click',function() {$(this).next("div").toggle();});

 .btn_expand{background:red;}.hidden{display: none;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>block 1</h2> <div id="one"> <div class="btn_expand sort">CCC</div> <div class="hidden">Hidden content shown by press CCC</div> <div class="btn_no_expand sort">EEE</div> <div class="btn_no_expand sort">AAA</div> <div class="btn_no_expand sort">DDD</div> <div class="btn_expand sort">BBB</div> <div class="hidden">Hidden content shown by press BBB</div> </div> <h2>block 2</h2> <div id="two"> <div class="btn_expand sort">CCC</div> <div class="hidden">Hidden content shown by press CCC</div> <div class="btn_no_expand sort">EEE</div> <div class="btn_no_expand sort">AAA</div> <div class="btn_no_expand sort">DDD</div> <div class="btn_expand sort">BBB</div> <div class="hidden">Hidden content shown by press BBB</div> </div>