如何防止div以随机顺序出现 [英] How to _prevent_ divs from appearing in random order

问题描述

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

奇怪的是，每次刷新页面时，都会以不同的顺序(显然是随机的)获得div.我猜想API调用异步发出，并且div以API调用完成的顺序出现.

当我以随机顺序搜索其他有div问题的人时，我发现了许多用于解决导致随机显示顺序的方法，但是在 preventing 上却一无所获.因此，然后我去寻找一种解决div排序的方法，并发现了这篇文章， http://codepen.io/JDenman6/pen /MeYOJP .

html选项卡中的twitcherList中的div列表来自渲染原始代码后检查twitcherList.我认为，如果对它们进行硬编码，则对它们进行排序可能会比从API调用中输入来进行排序更容易.我还添加了一个小测试div，并在sort函数中插入了一些代码，以进行以下操作:1)检查它是否正在运行，2)再次检查a.classname和b.classname是否返回了我认为的样子.

我觉得我缺少了一些巨大的，根本的，甚至很明显的东西.有什么想法吗?

解决方案

您需要根据适当的排序条件返回-1，0或1.

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

为了更好地使用浏览器支持，

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

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.

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.

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:

 $(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.

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.

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

解决方案

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

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

这篇关于如何防止div以随机顺序出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！