1

我有一个 javascript 应该显示像这个图像这样的项目：

但它不像图像那样按字母顺序生成它们。

这是一个示例（仅包括 HTML 和 CSS，它基本上显示了它在执行 javascript 后是如何呈现的）：

看看：http: //jsbin.com/UHiZUJU/20/edit

用大写字母生成这些项目的 javascript 如下：

 $(".processlinks-section-item-title2 a").each(function() {
                   var text = $(this).text();
                   var href = $(this).attr('href');
                   if (!text.length) return;
                   var letter = text.substr(0, 1).toUpperCase();
                   if (letter.match(/[0-9]/g)) 
                       letter = "#";

                   var list = $('.processlinks-section-template');
                   var section = list.children('[data-letter="'+letter+'"]');
                   if (!section.length) {
                       var section = $('<div class="processlinks-section-item" data-letter="' + letter + '"></div>');
                       if (!list.children().length) {
                           list.append(section);
                       } else {
                           // find right element so list is sorted
                           section.insertAfter(list.children()[0]);
                       }
                   }
                   var item = $('<div class="processlinks-section-item-title">' + '<a href="' + href + '">' + text + '</a>');
                   if (!section.children().length) {
                       section.append(item);
                   } else {
                       // find right element so list is sorted
                       item.insertAfter(section.children()[0]);
                   }

               });

所以我的问题是如何按字母顺序对这些进行排序？

这是一个测试 JSbin，其中包含 CSS、HTML 和 javascript，但 javascript 在按钮单击时执行，它仅用于测试。

看看：http: //jsbin.com/aMElAba/5/edit

4

1 回答 1

0

使用前对项目进行排序each：

$(".processlinks-section-item-title2 a").sort(function(a, b) {
    var letterA = $(a).text().charAt(0).toUpperCase(),
        letterB = $(b).text().charAt(0).toUpperCase();
    return letterA > letterB ? -1 : (letterA < letterB ? 1 : 0);
}).each(...
于 2013-10-09T08:04:36.463 回答