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]);
                   }

               });

私の質問は、これらをアルファベット順に並べ替えるにはどうすればよいですか?

これは、CSS、HTML、およびjavascriptが含まれているテスト用のJSbinですが、ボタンをクリックすると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 に答える