У меня есть список, который может иметь до двух уровней.Первый уровень представляет страны, а второй представляет штаты или провинции.
Я могу динамически добавлять новые страны или штаты, используя jQuery.При добавлении эти новые записи добавляются в базу данных, которые затем сохраняются для будущих поисков.
Теперь каждая запись представлена span, и каждая добавляемая страна или штат использует ту же структуру, что иих другие братья и сестры.Проблема заключается в том, что при создании с помощью jQuery, хотя каждый элемент имеет одинаковые предложения, эти новые дочерние элементы визуализируются по-разному.
Рабочий пример можно найти в следующей тестовой платформе .
Я использую Thymeleaf для начальной загрузки элементов, и этот код используется.
<div class="country-container">
<th:block th:each="country : ${countries}">
<div class="country-row">
<span class="father">
<i class="fa fa-eye child-toggle"></i>
<textarea class="data" maxlength="50" rows="1" cols="25" th:text="${country.countryPk}"></textarea>
<p>Cód: </p>
<textarea class="country-code" maxlength="4" rows="1" cols="4" th:text="${country.countryCode}"></textarea>
<i class="fa fa-plus-circle add-province"></i>
<i class="fa fa-minus-circle delete-country"></i>
</span>
<div class="child-container">
<th:block th:each="province : ${country.provinceSet}">
<span class="child">
<i class="fa fa-minus-circle delete-province"></i>
<textarea class="data" rows="1" cols="25" th:text="${province.provinceId.provincePk}"></textarea>
<p>Núm: </p>
<textarea class="province-number"
maxlength="2"
rows="1"
cols="4"
th:text="${province.provinceNumber}">
</textarea>
<i class="fas fa-arrow-circle-right info-province"></i>
</span>
</th:block>
</div>
</div>
</th:block>
</div>
Это мой код, используемый в jQuery для создания новой провинции или штата.
// Add a new province container to a country row
$(document).on('click', '.add-province', function() {
// Span where the province's father country name is located
var father = $(this).closest('.father');
// Father country's row
var countryRow = $(father).closest('.country-row');
// Provinces' container
var childContainer = $(father).next('div.child-container');
var actionContainer = $('<div class="action-holder full-width add-span">');
var addProvinceButton = $('<button type="button" class="add-province-button extra-small green">Agregar</button>');
// If there is no child container (div where all the provinces are) we need to add one to the country row
if(childContainer.length === 0) {
childContainer = $('<div class="child-container">');
$(countryRow).append(childContainer);
}
// Set up the span where the province will be located at
var newChild = $('<span class="child">');
var minusIcon = $('<i class="fa fa-minus-circle delete-province"></i>');
var textArea = $('<textarea class="data" rows="1" cols="25"></textarea>');
var textProvinceNumber = $('<textarea class="province-number" maxlength="2" rows="1" cols="4"></textarea>' +
'</textarea>');
// Append the elements to our child
newChild.append(minusIcon);
newChild.append(textArea);
newChild.append($('<p>Num: </p>'));
newChild.append(textProvinceNumber);
// Append the new child to his father
childContainer.append(newChild);
actionContainer.append(addProvinceButton);
actionContainer.append($('<p class="cancel-text">Cancelar</p>'));
newChild.append(actionContainer);
// Focus on the text box of the new province row
textArea.focus();
});
Просмотр списка при первоначальной загрузке.
Просмотр списка после добавления новой провинции.
Просмотр структуры HTML после добавления провинции.
Итак, мой вопрос: почему, хотя все дети имеют одинаковую структуру, размеры и стили CSS, они выглядят по-разному?