javascript - 通过jquery html()设置html的缺点

Question

通过 jqyuery 的 html() 设置 html 例如 div 的内容有什么缺点吗？功能？

因为我在 div 中有一个静态内容, 是由<li>制作的进度条.现在，它显示得很好，每个条形之间都有间隙，点击一个按钮，它的内容就会改变，但所有的代码都是一样的，但现在它不像以前那样显示了。它显示为一条连续线，<li> 之间不再有间隙.

有什么想法吗？

代码:

<div id="branch-status-bar-container">
  <ol class="branch-status-bar" data-branch-status-bar-steps="8" >
    <li class="branch-status-bar-done" id="" > </li>
    <li class="branch-status-bar-done" id="" > </li>
    <li class="branch-status-bar-done" id="" > </li>
    <li class="branch-status-bar-done" id="" > </li>
    <li class="branch-status-bar-done" id="" > </li>
    <li class="branch-status-bar-done" id="" > </li>
    <li class="branch-status-bar-done" id="" > </li>
    <li class="branch-status-bar-done" id="" > </li>
  </ol>
</div>

CSS:

#branch-status-bar-container {
    vertical-align: middle;
    padding-bottom: 30px;
}

.branch-status-bar {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.branch-status-bar li {
    display: inline-block;
    text-align: center;
    line-height: 3em;
}

.branch-status-bar[branch-data-status-bar-steps="2"] li {
    width: 49%;
}

.branch-status-bar[branch-data-status-bar-steps="3"] li {
    width: 33%;
}

.branch-status-bar[branch-data-status-bar-steps="4"] li {
    width: 24%;
}

.branch-status-bar[branch-data-status-bar-steps="5"] li {
    width: 19%;
}

.branch-status-bar[branch-data-status-bar-steps="6"] li {
    width: 16%;
}

.branch-status-bar[branch-data-status-bar-steps="7"] li {
    width: 14%;
}

.branch-status-bar[branch-data-status-bar-steps="8"] li {
.branch-status-bar[branch-data-status-bar-steps="9"] li {
    width: 11%;
}

.branch-status-bar li.branch-status-bar-done {
    color: black;
    border-bottom: 14px solid #0489B1;
    width: 12%;
}

.branch-status-bar li:after {
    content: "\00a0\00a0";
}

JS:

$(document).ready(function () {
    $('#profit-centers').on('change', function (){
        var profit_center_id = $('#profit-centers').val();

        $.ajax({
            url: '/reporting-portal/get-profit-center',
            type: 'POST',
            data: {
                profit_center_id : profit_center_id
            }, 
            success: function (data) {
                var json = JSON.parse(data);
                var html = profit_center.branch(json);
                $('#profit-center-content').html(html);
            }, 
            error: function () {

            }  
        });
    });
});

Answer 1

.branch-status-bar li:after {
    content: "\00a0\00a0";
    line-height: 3em;
}

如果点击按钮后内容变得异常，也许你可以试试。