字母列表未全部加载

Question

我只能通过使用 .each(( 函数加载第一个字母"A"，但其余字母没有循环出来。我希望每个类别名称的第一个字母(字母表(都在字母表中。

$(function($){ 
var letters = [];
$("<ul></ul>").appendTo(".page-content").html("<li></li>");
$("nav.link-list a").each(function(i){
var brandTitle = $(this).attr("title");
itmLetter =  brandTitle.trim().substring(0,1).toUpperCase();
console.log(letters);
console.log(itmLetter);
if (letters.indexOf(itmLetter)<0) {
letters.push(itmLetter);
		console.log(`${itmLetter} is not in ${letters} and index is ${i}`);
		$(`.page-content li:nth-child(${i+1})`).addClass("AddContent").attr({'id': itmLetter, 'data-content' : itmLetter});

} else {
	console.log(`${itmLetter} is in ${letters}`);
}
}); // end of each() function

}); // end of jQuery function

.AddContent:before {
content: attr(data-content);
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-content">
<h1>Brands</h1>
<div class="page-content__body"></div>
</div>
<article class="category-list">
<nav class="link-list">
<a href="/brands/abus" title="ABUS">ABUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="ACC">ACC</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="BUS">BUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="BKUS">BKUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="KUS">KUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="SUK">SUK</a>
</nav>
</article>

Answer 1

你不是说

$(function($) {
var letters = [];
var $ul = $("<ul></ul>").appendTo(".page-content");
$("nav.link-list a").each(function(i) {
var brandTitle = $(this).attr("title");
itmLetter = brandTitle.trim().substring(0, 1).toUpperCase();
if (letters.indexOf(itmLetter) < 0) {
letters.push(itmLetter);
$ul.append(
$("<li/>", {
"class": "AddContent",
"id": itmLetter,
"data-content": itmLetter
})
)
}
});
});

.AddContent:before {
content: attr(data-content);
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-content">
<h1>Brands</h1>
<div class="page-content__body"></div>
</div>
<article class="category-list">
<nav class="link-list">
<a href="/brands/abus" title="ABUS">ABUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="ACC">ACC</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="BUS">BUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="BKUS">BKUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="KUS">KUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="SUK">SUK</a>
</nav>
</article>