我有一个片段可以让您更好地理解我的问题：
$(window).load(function() {
var total;
$(document).ready(function() {
$('#dupe').click(function() {
$('#uploadForms').prepend($('#htmlTemplate').html());
$($('#uploadForms .upload_form')[0]).animate({
height: $($('#uploadForms .upload_form')[$('#uploadForms .upload_form').size() - 1]).css('height'),
opacity: 1
}, 500);
totalForms();
$(".upload_form").each(function() {
if (typeof $(this).find('a.close')[0] === 'undefined') {
if ($('#uploadForms .upload_form').size() > 1) $(this).prepend('<a class="close">x</a>');
}
});
$(".upload_form").on("click", ".close", function() {
$(this).parent().animate({
height: 0,
opacity: 0,
paddingTop: 0,
paddingBottom: 0
}, 500, function() {
$(this).parent().remove();
totalForms()
});
if ($('#uploadForms .upload_form').size() - 1 <= 1) $('#uploadForms .upload_form').find('a.close').remove();
});
});
function totalForms() {
total = $('#uploadForms .upload_form').size();
$('#total').html(total);
}
});
});.upload_form {
background-color: rgba(0, 0, 0, .3);
padding: 16px 64px 10px 76px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
margin-bottom: 10px;
}
.coverArt {
margin-right: 48px;
margin-bottom: 36px;
}
label input,
label textarea {
width: 252px;
}
.info {
display: block;
vertical-align: top;
}
.close {
float: right;
color: white;
margin: 10px;
display: block;
cursor: hand;
border-radius: 100%;
cursor: pointer;
width: 18px;
height: 18px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
}
.close:hover {
background-color: rgba(0, 0, 0, 0.5);
}
ol {
counter-reset: li;
margin-left: 0;
padding-left: 0;
}
ol > li {
position: relative;
margin: 0 0 6px 2em;
padding: 0px 0px 8px;
list-style: none;
border-top: 2px solid #666;
}
ol > li:before {
content: counter(li);
counter-increment: li;
position: absolute;
top: -2px;
left: -2em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 2em;
margin-right: 8px;
padding: 4px;
border-top: 2px solid #666;
color: #fff;
background: #666;
font-weight: bold;
font-family: "Helvetica Neue", Arial, sans-serif;
text-align: center;
}
li ol,
li ul {
margin-top: 6px;
}
ol ol li:last-child {
margin-bottom: 0;
}
.template {
display: none
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" value="Add file..." id="dupe">
<input type="button" value="Upload file(s)" id="dupe">
<hr>
<p>Total: <span id="total">1</span></p>
<div id="htmlTemplate" class="template">
<li>
<div class="upload_form" style="height:0;opacity:0;">
<span class="number"></span>
<a class="close">x</a>
<div class="info">
<p>Filler</p>
</div>
</div>
</li>
</div>
<ol id="uploadForms">
<li>
<div class="upload_form">
<span class="number"></span>
<a class="close">x</a>
<div class="info">
<p>Filler</p>
</div>
</div>
</li>
</ol>在此演示中，如果您单击“添加文件...”，则会添加一个新的列表元素，其中包含一个新的<div>内部元素。我的问题是：如何反转计数器的顺序？
相关CSS：
ol {
counter-reset:li;
}
ol > li {
position:relative;
margin:0 0 6px 2em;
padding: 0px 0px 8px;
list-style:none;
border-top:2px solid #666;
}
ol > li:before {
content: counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-2em;
box-sizing:border-box;
width:2em;
margin-right:8px;
padding:4px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}