Question

我有最多两个级别的列表。第一层代表国家，第二层代表州或省。

我可以使用jQuery动态添加新的国家或地区。添加后，这些新条目将添加到数据库中，然后保留下来以备将来搜索。

现在，每个条目都由span表示，并且添加的每个国家或州都使用与其他兄弟姐妹相同的结构。问题在于，使用jQuery创建时，尽管每个元素都有相同的格，但是这些新的子代在视觉上却有所不同。

您可以在以下class syntax中找到一个有效的示例。

我将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();
});

初始加载时列表的视图。

test platform

添加新省份后的列表视图。

添加省份后的HTML结构视图。

所以，我的问题是，为什么所有的子代都有相同的结构，大小和css样式，但它们看起来却不同呢？

Answer 1

该行中的元素隐式使用<div> <div class="dateSelect"> <div class="startDateSelect"> <p>Start Date: {{startDate | kendoDate:'MM/dd/yyyy'}}</p> <kendo-datepicker [(value)]="startDate"></kendo-datepicker> </div> <div class="endDateSelect"> <p>End Date: {{endDate | kendoDate:'MM/dd/yyyy'}}</p> <kendo-datepicker [(value)]="endDate"></kendo-datepicker> </div> <div class="submitButton"> <button kendoButton (click)="onSubmitClick()">Submit</button> </div> </div> <br> <div class="CostTowerTable"> <kendo-grid [data]="tableData" [height]="500"> <ng-template kendoGridToolbarTemplate> <button type="button" kendoGridExcelCommand icon="file-excel">Export To Excel</button> </ng-template> <kendo-grid-column field="PlantName" title="Plant Name" width="125"></kendo-grid-column> <kendo-grid-column field="Department" title="Dept." width="100"></kendo-grid-column> <kendo-grid-column field="GLAccount" title="Account" width="100"></kendo-grid-column> <kendo-grid-column field="AccountDescription" title="Description" width="200"></kendo-grid-column> <ng-container *ngFor="let col of columns"> <kendo-grid-column title="{{col}}" width="125"> <ng-template kendoGridCellTemplate let-dataItem> {{dataItem[col] | currency:'USD'}} </ng-template> </kendo-grid-column> </ng-container> <kendo-grid-excel fileName="CostTowers.xlsx"></kendo-grid-excel> </kendo-grid> <button type="button" class="k-button" (click)="excelexport.save()">Export To Excel</button> <kendo-excelexport [data]="tableData" fileName="CostTowers.xlsx" #excelexport> <kendo-excelexport-column field="PlantName" title="Plant Name" width="125"></kendo-excelexport-column> <kendo-excelexport-column field="Department" title="Dept." width="100"></kendo-excelexport-column> <kendo-excelexport-column field="GLAccount" title="Account" width="100"></kendo-excelexport-column> <kendo-excelexport-column field="AccountDescription" title="Description" width="200"></kendo-excelexport-column> <ng-container *ngFor="let col of columns"> <kendo-excelexport-column title="{{col}}" width="125"> <ng-template kendoGridCellTemplate let-dataItem> {{dataItem[col] | currency:'USD'}} </ng-template> </kendo-excelexport-column> </ng-container> </kendo-excelexport> </div> </div>，在这种情况下，html标签之间的标记中的空白实际上会有所不同。静态创建的行具有很大的空格，但是jQuery添加的元素没有空格。这些空白元素可以在检查器中清楚地看到，就像此屏幕截图

可以找到解决此问题的可行方法here

HTML动态元素的大小不同

1 个答案: