javascript - 在元素之间添加分隔符

Question

我通过循环访问一组其他元素在 div 中添加一些链接。

代码基本上是这样的

$('.js-section').children().each(function() {
  var initial = $(this).data('initial');
  $(".js-section-navigation").append("<a href='#"+ initial +"'>"+ initial +"</a>" )
});  

这会产生类似 abcd

的内容

现在，我如何在字符之间添加一个分隔符，例如 | 以获得 a |乙 | c | d?

如果我只是在追加中添加分隔符 at，我最终会得到 a |乙 | c | d | 但我不想要最后一个字符后的分隔符。

谢谢。

Answer 1

首先，您的代码中有不匹配的引号，尽管我认为这只是问题中的错字，因为您的代码在当前状态下根本无法运行。

要解决您的问题，您可以 push()每个<a>元素到数组中，然后 join()当你 append() 时，它们与分隔符一起，像这样:

var els = [];
$('.js-section').children().each(function() {
    var initial = $(this).data('initial');
    els.push('<a href="#"' + initial + '">' + initial + '</a>');
}); 
$(".js-section-navigation").append(els.join(' | '));

或者，您可以使用当前的代码并使用 CSS 放置分隔线，如下所示:

.js-section-navigation a {
    display: inline-block; 
    border-right: 1px solid #000; /* amend as needed */
    padding-right: 10px;
    margin-right: 10px;
}
.js-section-navigation a:last-child {
    border: 0;
    padding: 0;
    margin: 0;
}

Working Example