如何_prevent_ divs以随机顺序出现

Okay, so I'm learning front-end dev with javascript/jquery/bootstrap through FreeCodeCamp. This is not a core part of the project, but I don't understand it and it's distracting me too much. In this code pen here: http://codepen.io/JDenman6/pen/zqeGwp/ -- I have an array of Twitch.tv usernames that I check through an API and build divs to display them based on the JSON object comes back from the API call.

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

The weird thing is that every time I refresh the page, I get the divs in a different (apparently random) order. I'm guessing that the API calls are going out asynchronously and the divs are appearing in the order that the API calls finish.

奇怪的是,每次刷新页面时,我都会以不同的(显然是随机的)顺序获得div。我猜测API调用是异步出去的,而div正按照API调用完成的顺序出现。

When I Googled for other people having problems with divs in random order I found many solutions for causing random display order, but nothing on preventing it. So then I went looking for a solution to sorting divs and found this post, Ordering DIVs based on class name using Javascript/Jquery, which led me to this bit of code:

当我用随机顺序搜索其他有div问题的人时,我发现了许多导致随机显示顺序的解决方案,但没有任何阻止它的方法。那么我去寻找一个排序div的解决方案,并发现这篇文章,使用Javascript / Jquery基于类名订购DIV,这让我得到了这段代码:

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

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

Only I haven't been able to get it to work. I forked off my original codepen to do some poking around here: http://codepen.io/JDenman6/pen/MeYOJP.

只有我无法让它发挥作用。我分开了原来的代码,在这里做了一些讨论:http://codepen.io/JDenman6/pen/MeYOJP。

The list of divs in the twitcherList in the html tab is from inspecting the twitcherList after rendering the original code. I thought it might be easier to sort them if they're hard coded, rather than coming in from the API call. I also added a little test div and inserted some code into the sort function to 1) check that it was running and 2) double check that a.classname and b.classname were returning what I thought they were, which they are.

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

I feel like I'm missing something massive, fundamental, and possibly quite obvious. Any thoughts?

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

1 个解决方案

#1

You need to return -1, 0 or 1 based on the condition for proper sorting.

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

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

For better browser support use,

为了更好的浏览器支持使用

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

#1