Question

好的，我通过FreeCodeCamp通过javascript / jquery / bootstrap学习前端开发。这不是该项目的核心部分，但我不了解它并且让我分心太多。在此代码笔中： http://codepen.io/JDenman6/pen/zqeGwp/ - 我有一个Twitch.tv用户名数组，我通过API检查并构建div以根据从API调用返回的JSON对象显示它们。

奇怪的是，每次刷新页面时，我都会以不同的（显然是随机的）顺序获取div。我猜测API调用是异步出去的，并且div按照API调用完成的顺序出现。

当我用随机顺序搜索其他有div问题的人时，我发现导致随机显示顺序的许多解决方案，但阻止它没有任何内容。那么我去找一个排序div的解决方案，发现这篇帖子Ordering DIVs based on class name using Javascript/Jquery，这让我得到了一些代码：

 $(function(){
   var elem = $('#twitcherList').find('div').sort(sortMe);
   $('#twitcherList').append(elem);
 });

 function sortMe(a, b) {
        return a.className < b.className;
  }

只有我无法让它发挥作用。我把原来的codepen分开来做一些事情：http://codepen.io/JDenman6/pen/MeYOJP。

html选项卡中twitcherList中的div列表来自于在渲染原始代码之后检查twitcherList。我认为如果他们进行硬编码而不是从API调用进入，可能会更容易对它们进行排序。我还添加了一个小测试div，并在sort函数中插入了一些代码，1）检查它是否正在运行; 2）仔细检查a.classname和b.classname是否返回了我认为它们是什么，它们是什么。

我觉得我错过了一些重要的，基本的，可能非常明显的东西。有什么想法吗？

Answer 1

您需要根据条件返回-1，0或1进行正确排序。

function sortMe(a, b) {
     return a.className.localeCompare(b.className);
}

为了更好地使用浏览器，

function sortMe(a, b) {
     return a.className < b.className ? 1 : -1;
}

如何_prevent_ divs以随机顺序出现

1 个答案: