Question

我一直在努力寻找一种可以在显示后对Div进行排序的方法。到目前为止，我已经使用prepend()和append()并且我已经设法首先展示了流媒体，但下一个div是随机的。我希望能够显示谁在线，谁不在，以及谁已按顺序关闭帐户。

我已经尝试了延迟方法：$.when(makeDivs()).then(sortDivs());

但是它无法正常工作，我知道如何解决这个问题吗？

我的代码：http://codepen.io/diegomdzr/pen/vKWGbd

Answer 1

我还没有发表评论的声誉。但是根据我的理解，你想在将div的classNames应用到文档后按字母顺序生成它们吗？

function reOrder() {

var div = document.getElementsByTagName('div');
var cn = []; //ClassNames of each div.
for (var i = 0; i < div.length; i++) {
    cn.push(div[i].className);
}
cn = cn.sort(); //sort the array in alphabetical order.

var oDiv = [];
for (var i = 0; i < cn.length; i++) {
    //for each array item in cn, find where it's element is, remove the element, continue.
    for (var ii = 0; ii < div.length; ii++) {
        if (div[ii].className == cn[i]) {
            oDiv.push(div[ii]);
            var newDiv = [];
            for (var iii = 0; iii < div.length; iii++) {
                //Remove the element from the array.
                if (div[iii] != div[ii]) {
                    newDiv.push(div[iii]);
                }
            }
            div = newDiv;

        }
    }
}


return oDiv;
};

reOrder();

这将返回一个元素数组，但已排序。然后，您可以使用这些已排序的元素替换文档的所有元素。

Answer 2

排序很昂贵，如果可能应该避免，并且在这里不是特别好的解决方案。

为每个流媒体类别创建一个容器（div）更简单，（在线| offlie | nonExistent）然后只需将生成的HTML附加到相应的容器中。

$(document).ready(function() {
    var streamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "comster404", "brunofin", "HorussTV"];
    var link = "https://twitch.com/";

    // Create/append containers here (or hard-code them in HTML) ... in correct order of presentation within #streamers.
    var $onlineStreamers = $("<div/>").appendTo($('#streamers'));
    var $offlineStreamers = $("<div/>").appendTo($('#streamers'));
    var $nonExistantStreamers = $("<div/>").appendTo($('#streamers'));

    streamers.forEach(function getStatus(element) {
        $.getJSON("https://api.twitch.tv/kraken/channels/" + element + "?callback=?", function(json) {
            var img = json.logo || "http://res.cloudinary.com/djnwhbm1z/image/upload/v1468187598/unknown_i7m43p.png";
            $.getJSON("https://api.twitch.tv/kraken/streams/" + element + "?callback=?", function(json) {
                // Append HTML to the appropriate container
                if(json.stream) {
                    $onlineStreamers.append('<div class="online"><a href="' + link + element + '" target="_blank"><h4>' + element + '</h4><img src="' + img + '" class="profPic"><div class="content text-center"><span><b>Game:</b></br>' + json.stream.game + ' </br><b>Status: </b>' + json.stream.channel.status + '</span></div></a></div>');
                } else if(json.status == 422) {
                    $nonExistantStreamers.append('<div class="nonExistant"><a href="#"><h4>' + element + '</h4><img src="' + img + '" class="profPic"><div class="content text-center"><span>Account Closed</span></div></a></div>');
                } else {
                    $offlineStreamers.append('<div class="offline"><a href="' + link + element + '" target="_blank"><h4>' + element + '</h4><img src="' + img + '" class="profPic"><div class="content text-center"><span>Offline</span></div></a></div>');
                }
            });
        });
    });
});

注意：

除非需要在每个类别中对进行排序，否则不需要排序。

您可以从附加的HTML中清除class="online"等，除非这些类在其他地方使用。

按类名对div进行排序（动态添加）

2 个答案: