HTML动态元素的大小不同

我使用thymeleaf作为元素的初始加载,这是使用的代码。

<div class=“country container”>
<th:block th:each=“国家:$国家”>
<div class=“country row”>
<SPAN class=“父亲”>
<i class=“fa fa eye child toggle”></i>
<textfarea class=“data”maxlength=“50”rows=“1”cols=“25”th:text=“$country.countrypk”></textfarea>
<P>C_3 D:</P>
<textfarea class=“country code”maxlength=“4”rows=“1”cols=“4”th:text=“$country.country code”></textfarea>
<I class=“FA PLUS Circle Add Province”></I>
<I class=“FA减去圆圈删除国家”></I>
L//Stand & Gt;
<DIV class=“子容器”>
<th:block th:each=“省:$country.provinceset”>
<span class=“child”>
<I class=“FA减去圆圈删除省”></I>
<textfarea class=“data”rows=“1”cols=“25”th:text=“$省。provinceid.provinceck”></textfarea>
<P>n_:M:</P>
<textArea class=“省编号”
最大长度=“2”
行=“1”
科尔斯=“4”
th:text=“$省。省编号”>
</textArea>
<I class=“Fas Fa Arrow Circle Right Info Province”></I>
L//Stand & Gt;
</th:block>
&L/DIV & GT;
&L/DIV & GT;
</th:block>
</DIV>
< /代码> 

这是我在jquery中使用的代码,用于创建新的省或州。


//将新的省容器添加到国家/地区行
$(document).on('click','.Add Province',function()。{

//span该省的父国家名称所在的位置
var father=$(this).closest('.father');
//父亲国的行列
var countryRow=$(父亲).clostest(“.country row”);
//省容器
var child container=$父.next('div.child-container');
var actionContainer=$('<div class=“action holder full width add span”>');
var add province button=$('<button type=“button”class=“Add Province button extra small green”>agregar</button>');

//如果没有子容器(所有省份所在的DIV),则需要在国家/地区行中添加一个子容器
如果(childcontainer.length==0){
child container=$('<div class=“child container”>');
$(countryRow).append(子容器);
}

//设置省位于的范围
var newchild=$('<span class=“child”>');
var minusicon=$('<i class=“FA减去圆删除省”></i>');
var texterarea=$('<texterarea class=“data”rows=“1”cols=“25”></texterarea>');
var textfrovencenumber=$('<textfarea class=“Province number”maxlength=“2”rows=“1”cols=“4”></textfarea>')+
'</textarea>');

//将元素附加到子元素
newchild.append(分钟);
newchild.append(文本区域);
newchild.append($('<p>数字:</p>');
newchild.append(textProvinceNumber);

//把新孩子附加到他父亲身上
childcontainer.append(newchild);
actionContainer.append(addProvinceButton);
actionContainer.append($('<p class=“cancel text”>取消</p>');
newchild.append(actionContainer);

//关注新省行的文本框
textArea.focus();
(});

初始加载时的列表视图。




添加新省后的列表视图。




添加省后的HTML结构视图。




所以,我的问题是,为什么所有的孩子都有相同的结构、大小和CSS样式,但他们看起来不同?jQuery. 添加后,这些新条目将添加到数据库中,然后将其保留以供将来搜索。

现在,每个条目都由span并且每个被添加的国家或州都使用与其他兄弟国家相同的结构。问题是,当创建时查询尽管每个元素都有相同的分支,但这些新的子元素的可视化效果不同。

您可以在下面找到一个工作示例test platform.

我使用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样式,但他们看起来不同?