3

次のようなリストがあります。

<ul id="list">
    <li><a href="/">Adam</a></li>
    <li><a href="/">Alex</a></li>
    ...
    <li><a href="/">Zara</a></li>            
</ul>

そして、この JavaScript によってすでにアルファベット順に並べられています。

var mylist = $('#list');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
    return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

次に、次のようにリストを設定する必要があります。

<ul id="list">
    <li id="a"><a name="a" class="title">A</a>
        <ul>
            <li><a href="/">Adam</a></li>
            <li><a href="/">Alex</a></li>
        </ul>
    </li>
    <li id="b"><a name="b" class="title">B</a>
        <ul>
            <li><a href="/">Barry</a></li>
            <li><a href="/">Becky</a></li>
        </ul>
    </li>
    ...
    ...
    ...
    <li id="z"><a name="z" class="title">z</a>
        <ul>
            <li><a href="/">zavv</a></li>
            <li><a href="/">zora</a></li>
        </ul>
    </li>
</ul>

このApple Style Sliderでリストを使用するには.

JavaScriptでそれを行う方法を知っていますか?

4

3 に答える 3

6

最初にオブジェクト内のすべての要素を収集しli(コンテンツの頭文字で分類)、次にそれらのリストを個別に並べ替えるのが最も簡単です (推測します)。コードは 1,000 語以上の単語を表すため、次のようにします。

var list = { letters: [] };    //object to collect the li elements and a list of initial letters
$("#list").children("li").each(function(){
    var itmLetter = $(this).text().substring(0,1).toUpperCase();
    if (!(itmLetter in list)) {
        list[itmLetter] = [];
        list.letters.push(itmLetter);
    }
    list[itmLetter].push($(this));    //add li element to the letter's array in the list object
});

list.letters.sort();    //sort all available letters to iterate over them
$.each(list.letters, function(i, letter){
    list[letter].sort(function(a, b) {
        return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());    //sort li elements of one letter
    });
    var ul = $("<ul/>");    //create new dom element and add li elements
    $.each(list[letter], function(idx, itm){
        ul.append(itm);
    });
    $("#list").append($("<li/>").append($("<a/>").attr("name", letter.toLowerCase()).addClass("title").html(letter)).append(ul));    //add the list to a new li and to #list ul
});

JSFiddle: http://jsfiddle.net/KnC6M/

于 2012-08-06T15:49:50.690 に答える