要素間にセパレータを追加する

Question

div内にいくつかのリンクを追加しています。

は、コードがどのように私はa | b | c | dを取得するために、のような|区切り文字の間に追加することができ、基本的にabcd今

のようなものを生成

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

のように見えますか？

私が単に追加でセパレータを追加した場合、私はa | b | c | d |で終わりますが、最後の文字の後ろに区切り記号は必要ありません。

ありがとうございました。

Answer 1

まず、あなたのコードは、現在の状態ではまったく動作しないので、質問の誤植であると見なしていますが、最初はあなたのコードに引用符が一致していません。このようなあなたappend()、セパレーターと一緒に、あなたの問題を解決するために

あなたは可能性があり、アレイに内push()各<a>要素、join()それらは：

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