在元素之間添加分隔符

我通過循環一組其他元素來在div內添加一些鏈接。在元素之間添加分隔符

的代碼基本上是這樣

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

產生類似abcd

現在，我怎麼能字符分隔，如|之間，以獲得a | b | c | d補充的嗎？

如果我只是在追加中添加分隔符，我結束了a | b | c | d |但我不想在最後一個字符後的分隔符。

謝謝。

來源

2016-11-24 macsig

如果純粹是爲了設計目的，請使用CSS代替。類似於'.js-section-navigation> a：before {content：'|';填充：0 5px; }'並使用'：first-child'或'：first-of-type'來隱藏第一個元素中的分隔符。如果你堅持使用JS，你可以依靠每個元素的索引'each（）'的第一個參數來確定它是否是集合中的第一個/最後一個元素。 – haim770

首先你的代碼有不匹配的引號，但我認爲這只是一個錯誤的問題，因爲你的代碼目前的狀態根本不起作用。

要解決你的問題，你能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

來源

2016-11-24 08:20:16

謝謝，你的CSS解決方案適用於我。 – macsig

@macsig沒問題，很高興幫助 –

在元素之間添加分隔符

回答

相關問題