Javascript 在JQuery中按字母顺序排序，有两个组

我有一张待办事项清单。每一行都有一个星形图标，你可以点击它，就像gmail一样。这里的区别是，如果单击星号，它应该排序到顶部（更高的优先级），但也可以通过升序alpha在星号组内重新排序。未排序的项目在下面排序，也按升序alpha排序。除了alpha排序之外，一切都正常工作。下面是我正在做的排序函数。我已经验证了下面的所有功能，除了//按alpha位对数组进行排序

排序失败：

另外，我怀疑这是否值得一提，但数据存储在mySQL中，并通过php预填充

我不知道有什么方法可以直接在

$（'li'）

上使用

.sort（）

，而不将其拆分为单独的数组

---

有人看到我的傻瓜了吗？

我看不出你在哪里将排序列表添加回DOM。如果你不是，那就是问题所在。对元素数组进行排序根本不会更新DOM

此外，你的分类是非常昂贵的。最好映射一个对象数组，该数组中的元素与要排序的实际值成对

最后，您似乎在一个页面上多次使用同一ID。那是错误的。它可以与jQuery的

.children（选择器）

过滤器一起工作，但它仍然是错误的。你需要改变这一点

---

在这里，我映射了一个对象数组，其中包含保存要排序的文本的

text

属性和保存元素的

task

属性

我将

p#task name

更改为

p.task-name

，因此您应该在元素上将其更改为

class=“task name”

然后我使用

.localeCompare（）

进行排序，它返回一个数值

最后，

.forEach（）

循环将元素附加到DOM

var data = starredTasks.map(function(t) {
    return {  task: t, 
              text: $(t).children('p.task-name').text().toUpperCase()
           };
}).sort(function(obj_a, obj_b) {
    obj_a.text.localeCompare(obj_b.text);

}).forEach(function(obj) {
    original_container.append(obj.task);
});

这假设

starredTasks

是一个实际数组。如果是jQuery对象，则执行

starredTasks.toArray（）.map（func…

）

---

original\u容器

表示一个jQuery对象，它是

任务

元素的直接父对象。

感谢您的响应！我正在执行一个

.append（）

排序之后。我没有发布所有代码以使其更易于阅读。我验证了其他所有内容都正常工作，并将其缩小到我的排序逻辑。多个同名ID肯定是一个问题。我会将其更改为一个类。很好！我将尝试您的方法。我们确实需要一个完全重新编程的最小示例ces问题。否则，我们只是在浪费时间猜测您的问题。另外，报告您可能遇到的任何控制台错误。更新以显示函数。不过，我只是在排序逻辑方面有问题，不想因为WIP位而分心。这是我关于SO的第一篇帖子，因此我还没有把礼仪写下来。谢谢您的帮助。；）因此，我更新了sortTasks（）函数以使用您的逻辑，并且与我原来的一样，它正确地按星号对任务进行排序，但是alpha仍然不起作用。。。我想知道我错过了什么。没有控制台错误。@5PalmTechnique:您调试了什么？您已将哪些值记录到控制台？我看到您正在调用一个函数

newsortasks

，但您的函数名为

sortTasks

。您正在遍历代码中未显示的

ul

元素。已更新html以显示ul级别。newSortTasks只是一个复制/粘贴错误，我忘了修复它。至于登录到控制台，我已经验证了列表名是正确的，并且对象包含正确的数据，我将开始深入到排序的每个阶段，看看哪里出错了。。。

<div id="task-container" class="container">
    <form name="enter-task" method="post" action="">
        <input id="new-task" name="new-task" type="text" autofocus>
    </form>
    <h2 id="today">today</h2>
        <ul id="today-list">
            <li id="457" class="task">
               <img class="star" src="images/star_checked.gif">
               <p class="task-name" contenteditable>buy milk</p>
               <p class="task-date"> - Wednesday</p>
            </li>
        </ul>
    <h2 id="tomorrow">tomorrow</h2>
        <ul id="tomorrow-list">
        </ul>
    <h2 id="future">future</h2>
        <ul id="future-list">
        </ul>
    <h2 id="whenever">whenever</h2>
        <ul id="whenever-list">
        </ul>
</div>

$('body').on('click', 'img.star', function(){
    var thisList = '#' + $(this).parent('li').parent('ul').attr('id');
    if ($(this).attr('src') == 'images/star_checked.gif') {
        $(this).attr('src', 'images/star_unchecked.gif');
    } else {
        $(this).attr('src', 'images/star_checked.gif');
    }   
    sortTasks(thisList);        
});

var data = starredTasks.map(function(t) {
    return {  task: t, 
              text: $(t).children('p.task-name').text().toUpperCase()
           };
}).sort(function(obj_a, obj_b) {
    obj_a.text.localeCompare(obj_b.text);

}).forEach(function(obj) {
    original_container.append(obj.task);
});