我很困惑如何从li标签字母列表中获取数据内容属性值,因此可以进行值比较,并使用.filter()函数过滤内容。到目前为止,我只能根据列表中不同字母的数量多次打印第一个字母A,但是如何仅一次打印所有字母(fx。A-Z)?
$(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
})
);
}
}); // end of alphabet list
setTimeout ( filter(), 3000);
function filter() {
$("li.AddContent").each(function(){
var al = $("li.AddContent").attr("id");
console.log(al);
});
}
});
.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>
时间?