Lists alphabetical ordered by javascript with letter headings - Stack Overflow

admin管理员组

文章数量:1355529

I have a list like this:

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

And it is already alphabetical ordered by this 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); });

Now I need to set the list like this:

<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>

To use the list in this Apple Style Slider.

Do you know how can I do it with JavaScript?

I have a list like this:

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

And it is already alphabetical ordered by this 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); });

Now I need to set the list like this:

<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>

To use the list in this Apple Style Slider.

Do you know how can I do it with JavaScript?

• javascript
• list
• sql-order-by
• alphabetical

Share Improve this question Follow edited Aug 7, 2012 at 12:25 Teun Zengerink 4,40355 gold badges3232 silver badges3232 bronze badges asked Aug 6, 2012 at 14:36 AmacaAmaca 3111 silver badge33 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

It would be easiest (I guess) to collect all li elements in an object first (categorized bei their content's initial letter) and then sort those lists separately. Since code says more than a thousand words, here's how I would do that:

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/KnC6M/

Thanks @Aletheios, I updated your solution to make it more efficient solution with the use of css without removing list by $("#list").empty();

Assuming your list is already sorted.

var letters = [];

$("#list").children("li").each(function(i){
    var itmLetter = $(this).text().trim().substring(0,1).toUpperCase();
    if (letters.indexOf(itmLetter)<0) {
        console.log(`${itmLetter} is not in ${letters} and index is ${i}`);
        $(`#list li:nth-child(${i+1})`).addClass("AddContent").attr('data-content',itmLetter);
        letters.push(itmLetter);
    } else {
        console.log(`${itmLetter} is in ${letters}`);
    }
});

CSS:

#list{
  margin-left: 15px;
}

li.AddContent:before {
   content: attr(data-content);
   margin-left: -15px;
   display: block;
}

HTML:

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

JSfiddle: http://jsfiddle/KnC6M/105/

I was searching for something similar, I wanted to sort an array in alphabetically grouped manner. Here is my code which is little modified version of @Aletheios code. Hope it helps.

var list = { letters: [] };
var words = {let: ['abc', 'aabbgg', 'cda', 'hello', 'bca']};

$.each(words.let, function(){                
    var itLetter = this.substring(0,1).toUpperCase();
    if(!(itLetter in list)){
        list[itLetter] = [];                    
        list.letters.push(itLetter);
    }
    list[itLetter].push($(this));
});

list.letters.sort();
$.each(list.letters, function(i, letter){

    var ul = $("<ul/>");
    var li = $('<li/>');
    $.each(list[letter], function(idx, itm){
        ul.append('<li>'+ itm[0] +'</li>');
        console.log(itm);

    });
    $("body").append($("<li/>").append($("<a/>").attr("name", letter.toLowerCase()).addClass("title").html(letter)).append(ul));
});

Here is the fiddle. http://jsfiddle/checkomkar/x8taqcnk/

本文标签： Lists alphabetical ordered by javascript with letter headingsStack Overflow