如何附加列表项<李>从无序列表<ul>其他四个未排序列表之间

How do I append list items <li> from an Unordered list <ul> between four other Unordered lists based upon their content

本文关键字：列表 gt lt 四个 排序 之间 无序 何附加 ul 其他      更新时间：2023-09-26

我目前有一个品牌名称列表，这些名称被动态拉入页面，需要根据其品牌名称在4个列表之间进行分割。例如，一列将包含任何以数字开头的内容。第二列将包含所有以字母A至H开头的品牌。第三列为I-P。第四列Q-Z。我目前正在尝试使用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/

如果你想让代码有点DRYer，你可以把正则表达式存储在一个映射对象中：

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/

相关文章：