Trennzeichen zwischen Elementen hinzufügen

Question

Ich füge einige Links innerhalb eines div hinzu, indem ich eine Reihe anderer Elemente durchlaufe.

Der Code sieht im Grunde wie

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

, die jetzt so etwas wie abcd

produziert, wie kann ich zwischen den Charakteren einen Separator wie | hinzufügen, um a | b | c | d zu bekommen?

Wenn ich einfach das Trennzeichen im Anhang hinzufügen, habe ich am Ende a | b | c | d |, aber ich möchte nicht das Trennzeichen nach dem letzten Zeichen.

Danke.

Answer 1

Erstens hat Ihr Code falsche Anführungszeichen, obwohl ich annehme, dass dies nur ein Tippfehler in der Frage ist, da Ihr Code in seinem aktuellen Zustand überhaupt nicht funktionieren würde.

Ihr Problem zu beheben Sie könnten push() jedes <a> Element in einem Array, dann join() sie zusammen mit dem Separator, wenn Sie append(), wie folgt aus:

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(' | ')); 

Alternativ können Sie den Code verwenden Sie gerade sind und stellen Sie den Teiler mit CSS, so etwas wie dieses:

.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