Question 35731 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

how to keep new lines after moving an element up and down – Jquery

in the example below click on dolor so it becomes active
then click on button – and dolor is moved up
but in the resulting html – the new line is missing

$(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 ?

Tags:

2

Answers


  1. 0

    Regarding the newline the OP wants to insert, it can be done by creating and inserting a text node like …

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

    … which changes the OP’s code to …

    $(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 …

    "[…] to save awrap html as a new file and want[s] to keep new lines just for better readability".

    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.

    $(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, '$1n')
    .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>
    Login or Signup to reply.
  2. 0

    Try below snippet

    $(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);
    $('.awrap').html($('.awrap').html().replace(/n/g, ""));
    $('.ati').after("n");
    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search