![](/img/trans.png)
[英]How to show and hide list items(li) elements inside unordered list(ul) using jquery(preferably)?
[英]How do I append list items <li> from an Unordered list <ul> between four other Unordered lists based upon their content
我目前有一個動態添加到頁面中的品牌名稱列表,需要根據品牌名稱在4個列表之間進行細分。 例如,一列將包含以數字開頭的所有內容。 第二列將包含以字母A到H開頭的所有品牌。第三列IP。 第四欄QZ。 我目前正在嘗試在jquery中使用.map()函數遍歷列表並將項目拉出並追加到相應的列表中,但遇到了一些困難。 任何幫助將不勝感激!
(注意:不是實際的品牌列表...最終列表中將包含大約50個品牌。)
這是我的html:
<div class="brand-directory-body">
<ul class="brand-directory-list" style="display:none;">
<li class="brand">37 Signals</li>
<li class="brand">Apple</li>
<li class="brand">BMG</li>
<li class="brand">Cartoon Network</li>
<li class="brand">Disney</li>
<li class="brand">ENews</li>
<li class="brand">Nike</li>
<li class="brand">Adidas</li>
<li class="brand">Frito</li>
<li class="brand">Coke</li>
<li class="brand">Adobe</li>
<li class="brand">Hostess</li>
<li class="brand">Dominoes Pizza</li>
<li class="brand">Honest Co</li>
<li class="brand">Z Brand</li>
</ul>
<div class="brand-directory-column">
<h3 class="column-title">#</h3>
<ul class="brand-directory-list-num"></ul>
</div>
<div class="brand-directory-column">
<h3 class="column-title">A-H</h3>
<ul class="brand-directory-list-ah"></ul>
</div>
<div class="brand-directory-column">
<h3 class="column-title">I-P</h3>
<ul class="brand-directory-list-ip"></ul>
</div>
<div class="brand-directory-column">
<h3 class="column-title">Q-Z</h3>
<ul class="brand-directory-list-qz"></ul>
</div>
var lists = {
numbers: [],
AH: [],
IP: [],
QZ: []
};
$('.brand').each(function () {
var letter = $.text(this).substr(0, 1);
if ( /\d/.test(letter) ) {
lists.numbers.push(this);
}
else if ( /[a-h]/i.test(letter) ) {
lists.AH.push(this);
}
else if ( /[i-p]/i.test(letter) ) {
lists.IP.push(this);
}
else if ( /[q-z]/i.test(letter) ) {
lists.QZ.push(this);
}
});
$('.brand-directory-list-num').append( lists.numbers );
$('.brand-directory-list-ah').append( lists.AH );
$('.brand-directory-list-ip').append( lists.IP );
$('.brand-directory-list-qz').append( lists.QZ );
這是小提琴: http : //jsfiddle.net/q697n/
如果要使代碼稍微干一點,可以將正則表達式存儲在map對象中:
var lists = {
numbers: [],
AH: [],
IP: [],
QZ: []
};
var map = {
numbers: /\d/,
AH: /[a-h]/i,
IP: /[i-p]/i,
QZ: /[q-z]/i
}
$('.brand').each(function () {
var el = this, letter = $.text(this).substr(0, 1);
$.each(map, function (key, regex) {
if ( regex.test(letter) ) {
lists[key].push(el);
return false;
}
});
});
$('.brand-directory-list-num').append( lists.numbers );
$('.brand-directory-list-ah').append( lists.AH );
$('.brand-directory-list-ip').append( lists.IP );
$('.brand-directory-list-qz').append( lists.QZ );
這是小提琴: http : //jsfiddle.net/q697n/1/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.