基于字符串大小的填充？

Question

我正在尝试将一些列表动态插入到名为foos 的element 中。我想手动编号这个列表（例如<span>${i + 1}. </span> 用于列表元素编号中的i），但我希望这个数字和元素之间的距离能够很好地对齐。我的意思是：

 8. foo
 9. foo
10. foo
11. foo

而不是sn-p中显示的内容，即

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>

Answer 1

您可以依靠一些 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>

Answer 2

我认为使用以下标签<pre></pre> 会有所帮助。 <pre> 标签保留空格。

并且使用等宽字体可确保空格与其他字符的宽度相同。

希望对你有帮助 ;-)

Answer 3

使用 CSS 可以实现这样的事情：

let people = ['foosa', 'foo', 'foofsafa', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foofsafasf', 'foo'];
var htmlString = "";
for (var i = 0; i < people.length; i++) {
  var person = people[i];
  htmlString += `
      <div class="item-wrapper">
 	  <span>${i + 1}. </span>
          <span>${person}</span>
      </div>`;
}
$('#foos').html(htmlString);

.item-wrapper {
  display: table-row;
}

.item-wrapper span {
  display: table-cell;
}

.item-wrapper span:first-child {
  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>

受@Temani Afif 解决方案启发的编辑。

Answer 4

为什么不直接添加样式： htmlString += <span>${i + 1}. </span><span>${person}</span><br>;

htmlString += <span style="text-align:right;">${i + 1}. </span><span>${person}</span><br>;

Answer 5

可能是这样的。

let people = ['foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo'];
let max_string_size = (people.length + "").length;  
let htmlString = people.map((person, idx) => {
  let idx_str = (idx + 1 + "").padStart(max_string_size).replace(/\s/g, '  ');
  return `<span>${idx_str}. </span><span>${person}</span><br>`;
}).join("")
$('#foos').html(htmlString);

Answer 6

通过找出你的数组的长度来找出你需要填充多少，然后是你的数组的长度......然后使用填充函数。

var blah = ["foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo"];
var textToAppend = ". ";
var padTo = (blah.length + textToAppend).length;
for(var i = 0; i<blah.length;i++)
  {
    padded = ((i+1) + textToAppend).padStart(padTo);
    console.log(padded + blah[i]);
  }

把它弄出来

 1. foo
 2. foo
 3. foo
 4. foo
 5. foo
 6. foo
 7. foo
 8. foo
 9. foo
10. foo
11. foo
12. foo
13. foo
14. foo
15. foo
16. foo
17. foo