items loses its alignment after sorting

Question

why items loses its alignment after sorting?

I tried writing css code again - without success.

Any help?

function sort_tags(){
 let a = $('#selSort').val();
 if(a == 'asc'){
  $('.tag').sort(function(a, b) {
   if (a.textContent < b.textContent) {return -1;}
   else{return 1;}
  }).appendTo('#parent');
 }
 else if(a == 'desc'){
  $('.tag').sort(function(a, b) {
   if (a.textContent < b.textContent) {return 1;}
   else{return -1;}
  }).appendTo('#parent');
 }
 $('.tag').css('display', 'inline-block');
 $('#parent').css('text-align-last', 'justify');
}

.parent{
text-align:justify;
text-align-last:justify;
}

.tag{
display:inline-block;
padding:2px 9px;
background:gold;
margin:9px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='parent' id='parent'>
<div class='tag'>aaa</div>
<div class='tag'>bbb</div>
<div class='tag'>ccc</div>
<div class='tag'>ddd</div>
</div>

<select class='selTop' id='selSort' onchange='sort_tags()'>
<option value='asc'>SORT ABC</option>
<option value='desc'>SORT CBA</option>
</select>

score 1 · Accepted Answer · answered Jan 11 '19 at 09:39

You can use flex

.parent{
  display:flex;
  justify-content: space-between;
}

function sort_tags(){
 let a = $('#selSort').val();
 if(a == 'asc'){
  $('.tag').sort(function(a, b) {
   if (a.textContent < b.textContent) {return -1;}
   else{return 1;}
  }).appendTo('#parent');
 }
 else if(a == 'desc'){
  $('.tag').sort(function(a, b) {
   if (a.textContent < b.textContent) {return 1;}
   else{return -1;}
  }).appendTo('#parent');
 }
}

.parent{
  display:flex;
  justify-content: space-between;
}

.tag{
display:inline-block;
padding:2px 9px;
background:gold;
margin:9px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='parent' id='parent'>
<div class='tag'>aaa</div>
<div class='tag'>bbb</div>
<div class='tag'>ccc</div>
<div class='tag'>ddd</div>
</div>

<select class='selTop' id='selSort' onchange='sort_tags()'>
<option value='asc'>SORT ABC</option>
<option value='desc'>SORT CBA</option>
</select>

Check out this answer [https://stackoverflow.com/questions/21412641/text-align-justify-not-working-on-dynamically-created-content/21414068](https://stackoverflow.com/questions/21412641/text-align-justify-not-working-on-dynamically-created-content/21414068) — aseferov, Jan 11 '19 at 09:47
Solved! Justified items must have a space between them. Thanks a lot. — qadenza, Jan 11 '19 at 09:49

items loses its alignment after sorting

1 Answers1