我试图动态地将一些列表插入称为element
的foos
中。我想手动编号此列表(例如,列表元素编号中<span>${i + 1}. </span>
的i
),但我希望此编号与元素之间的距离能够很好地对齐。我的意思是:
8. foo
9. foo
10. foo
11. foo
而不是摘要中显示的内容,即
8. foo
9. foo
10. foo
11. foo
多谢您的协助!
let people = ['foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo'];
var htmlString = "";
for (var i = 0; i < people.length; i++) {
var person = people[i];
htmlString += `<span>${i + 1}. </span><span>${person}</span><br>`;
}
$('#foos').html(htmlString);
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
type="text/javascript" charset="utf-8"></script>
<div id="foos"></div>
最佳答案
您可以依靠一些CSS和计数器来轻松实现此目的:
let people = ['foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo'];
var htmlString = "";
for (var i = 0; i < people.length; i++) {
htmlString += `<span>${people[i]}</span>`;
}
$('#foos').html(htmlString);
#foos {
counter-reset:num;
}
#foos span {
display:block;
margin-left:20px; /*adjust this*/
position:relative;
}
#foos span:before {
content:counter(num)'.';
counter-increment:num;
position:absolute;
right:100%;
margin-right:3px; /*adjust this*/
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
type="text/javascript" charset="utf-8"></script>
<div id="foos"></div>
如果数字可以增加很多,则可以尝试以下操作,其中数字区域的宽度将根据最大数字进行调整:
let people = ['foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo'];
var htmlString = "";
for (var i = 0; i < people.length; i++) {
htmlString += `<span>${people[i]}</span>`;
}
$('#foos').html(htmlString);
#foos {
counter-reset:num;
}
#foos span {
display:table-row;
}
#foos span:before {
content:counter(num)'.';
counter-increment:num;
display:table-cell;
text-align:right;
padding-right:5px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
type="text/javascript" charset="utf-8"></script>
<div id="foos"></div>