上下移動元素后如何保留新行

Question

在下面的示例中，單擊dolor使其變為活動狀態
然后點擊按鈕 - dolor向上移動
但在生成的 html 中 - 缺少新行

 $(document).on('click', '.ati', function(){ $('.aact').removeClass('aact'); $(this).addClass('aact'); }); $('button').on('click', function(){ let tg = $('.aact'); if(tg.length == 0){alert('TITLE IS NOT SELECTED');return;} let tgg = tg.prev(); tg.insertBefore(tgg); let a = $('#awrap').html(); console.log(a); });

 .aact{background:orange;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="awrap" id='awrap'> <div class="ati">lorem</div> <div class="ati">ipsum</div> <div class="ati">dolor</div> </div> <button>CLICK</button>

點擊按鈕后的結果：

<div class="ati">lorem</div>
<div class="ati aact">dolor</div><div class="ati">ipsum</div>

我需要的是：

<div class="ati">lorem</div>
<div class="ati aact">dolor</div>
<div class="ati">ipsum</div>

如何得到這個？

Answer 1

關於 OP 想要插入的換行符，可以通過創建和插入文本節點來完成，例如...

$(document.createTextNode('\n')).insertBefore(tgg);

...將OP的代碼更改為...

 $(document).on('click', '.ati', function(){ $('.aact').removeClass('aact'); $(this).addClass('aact'); }); $('button').on('click', function(){ let tg = $('.aact'); if (tg.length === 0) { alert('TITLE IS NOT SELECTED'); return; } let tgg = tg.prev(); tg.insertBefore(tgg); $(document.createTextNode('\n')).insertBefore(tgg); let a = $('#awrap').html(); console.log(a); });

 .aact { background: orange; }.as-console-wrapper { max-height: 110px;important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="awrap" id='awrap'> <div class="ati">lorem</div> <div class="ati">ipsum</div> <div class="ati">dolor</div> </div> <button>CLICK</button>

但結果仍然可能無法滿足 OP，因為 OP 想要/需要......

“[...] 將awrap html 另存為新文件並希望[s] 保留換行只是為了更好的可讀性” 。

后者聽起來更像是清理任務，其中基於正則表達式的方法可能最適合。

一個將 go 用於 2 個文本替換，其中第一個匹配任何結束或空標記，包括可選的尾隨換行符序列... /(<\/[^>]+>|<[^\/]+\/>)\n*/g ... 並且第二個從標記字符串中修剪換行符的任何前導序列... /^\n+/ ...。

 $(document).on('click', '.ati', function(){ $('.aact').removeClass('aact'); $(this).addClass('aact'); }); $('button').on('click', function(){ let tg = $('.aact'); if (tg.length === 0) { alert('TITLE IS NOT SELECTED'); return; } let tgg = tg.prev(); tg.insertBefore(tgg); let a = $('#awrap').html().replace(/(<\/[^>]+>|<[^\/]+\/>)\n*/g, '$1\n').replace(/^\n+/, ''); console.log(a); });

 .aact { background: orange; }.as-console-wrapper { max-height: 110px;important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="awrap" id='awrap'> <div class="ati">lorem</div> <div class="ati">ipsum</div> <div class="ati">dolor</div> </div> <button>CLICK</button>