使用'like'订购<li>元素?

时间:2017-06-06 19:55:37

标签: javascript html css

我有一个javascript查询返回的数据列表(代码如下所示)。这是由Github返回的,因此其中一个字段显示了项目中使用的主要语言。我可以通过识别我的仓库中使用的所有唯一主要语言来返回带有自己标题的项目的排序列表吗?

function outputPageContent() {
   if (repositories.length == 0) {
      outhtml = outhtml + '<p>No repos!</p></div>';
   } else {
      outhtml = outhtml + '<p><strong>Project List:</strong></p> <ul>';
      $.each(repositories, function(index) {
         outhtml = outhtml + '<li id="' + repositories[index].language + index + '"><a href="' + repositories[index].html_url + '" target="_blank">' + repositories[index].name + '</a></li>';
      });
      outhtml = outhtml + '</ul></div>';
   }
   $('#ghapidata').html(outhtml);
}

1 个答案:

答案 0 :(得分:2)

在创建你的html之前先排序。

repositories.sort(function(a, b){
    if(a.name < b.name) return -1;
    if(a.name > b.name) return 1;
    return 0;
})

排序功能也可以得到比较功能。这个匿名函数定义了一个替代排序顺序。您可以更改数组的比较索引。

完整代码

function outputPageContent() {
   if (repositories.length == 0) {
      outhtml = outhtml + '<p>No repos!</p></div>';
   } else {
      outhtml = outhtml + '<p><strong>Project List:</strong></p> <ul>';
      repositories.sort(function(a, b){
        if(a.name < b.name) return -1;
        if(a.name > b.name) return 1;
        return 0;
      })
      $.each(repositories, function(index) {
         outhtml = outhtml + '<li id="' + repositories[index].language + index + '"><a href="' + repositories[index].html_url + '" target="_blank">' + repositories[index].name + '</a></li>';
      });
      outhtml = outhtml + '</ul></div>';
   }
   $('#ghapidata').html(outhtml);
}

替代排序方法

此外,您可以使用更流畅的另一种比较功能。

repositories.sort(function(a, b){
    return a.name.localeCompare(b.name);
})