通过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: "0a00a0";
}

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: "0a00a0";
    line-height: 3em;
}

如果点击按钮后内容发生异常，您可以尝试一下。