[英]how to keep new lines after moving an element up and down
in the example below click on dolor
so it becomes active在下面的示例中,单击
dolor
使其变为活动状态
then click on button - and dolor
is moved up然后点击按钮 -
dolor
向上移动
but in the resulting html - the new line is missing但在生成的 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>
result after button click:点击按钮后的结果:
<div class="ati">lorem</div>
<div class="ati aact">dolor</div><div class="ati">ipsum</div>
what I need is:我需要的是:
<div class="ati">lorem</div>
<div class="ati aact">dolor</div>
<div class="ati">ipsum</div>
how to get this?如何得到这个?
Regarding the newline the OP wants to insert, it can be done by creating and inserting a text node like...关于 OP 想要插入的换行符,可以通过创建和插入文本节点来完成,例如...
$(document.createTextNode('\n')).insertBefore(tgg);
... which changes the OP's code to... ...将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>
But the result still might not satisfy the OP since the OP wants/needs...但结果仍然可能无法满足 OP,因为 OP 想要/需要......
"[...] to save
awrap
html as a new file and want[s] to keep new lines just for better readability" .“[...] 将
awrap
html 另存为新文件并希望[s] 保留换行只是为了更好的可读性” 。
The latter sounds more like a sanitizing tasks where a regex based approach might be suited best.后者听起来更像是清理任务,其中基于正则表达式的方法可能最适合。
One would go for 2 text replacements where the first one matches any closing or empty tag including an optional trailing sequence of newline characters... /(<\/[^>]+>|<[^\/]+\/>)\n*/g
... and the second trims any leading sequence of newline characters... /^\n+/
... from the markup string.一个将 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.