요소 사이에 구분 기호 추가

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

먼저 코드가 잘못 입력 된 따옴표가 있습니다. 그러나이 코드는 현재 상태에서 전혀 작동하지 않으므로 질문에 오타가 있다고 가정합니다.

문제를 해결하기 위해 당신이 할 수 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(' | ')); 

은 또한 당신이 현재의 코드를 사용할 수 있으며

.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

이 같은 CSS를 사용하여 분할, 뭔가 배치 0