Предметы теряют выравнивание после сортировки

почему предметы теряют выравнивание после сортировки?

Я снова попытался написать код css - безуспешно.

Любая помощь?

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>

javascript jquery sorting

11.01.2019 10:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать 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>

«почему предметы теряют выравнивание после сортировки»?

— 11.01.2019 10:44

Посмотрите этот ответ https://stackoverflow.com/questions/21412641/text-align-just‌ ify-not-working-on-d‌ ynamically-created-c‌ ontent / 21414068

— 11.01.2019 10:47

Решено! Между выровненными предметами должен быть промежуток. Большое спасибо.

— 11.01.2019 10:49

11.01.2019 10:39