按字母顺序在博客中创建索引

Question

我正在尝试为我的博客创建索引。我想为不同的字母显示不同的页面。例如，在 "Page A" 中，我只想显示所有以 "A" 开头的标签。然后"Page B"、"Page 0"等

我想出了一个代码，它给出了站点中的所有列表：

function cat(json){ //get categories of blog & sort them
    var label = json.feed.category;
    var lst=[];

    for (i=0; i<label.length; i++){
          lst[i] = label[i].term ; 

      document.getElementById("listspan").innerHTML =  document.getElementById("listspan").innerHTML + "<a href=\"/search/label/" + label[i].term + "\">" + label[i].term + "</a><br>"  
     }
}

<span id="listspan"></span>
<script src="http://www.chordzone.org/feeds/posts/summary?alt=json&max-results=0&callback=cat">
</script>

我面临的问题是由于标签过多导致页面崩溃。

有什么方法可以减少页面上的负载，以便只显示以 "A" 或 "B" 等开头的标签。是否可以在 json 调用期间按字母顺序对标签进行排序并仅显示所需的标签，而不是一次调用站点中的所有标签？

感谢任何帮助。

Answer 1

您可以使用 filter 方法，因为 json.feed.category 是一个数组。

.filter(function(category) {
  return category.term.toLowerCase().indexOf('a') === 0;
})

过滤后，该数组中的所有项目都以"A"开头，然后将这些项目插入DOM。并使用 appendChild method is faster than innerHTML in this case. See this HERE。

.forEach(function(category) {
  var a = document.createElement('a');
  a.href = 'search/label/' + category.term;
  a.innerText = category.term;
  listspan.appendChild(a);
  listspan.appendChild(document.createElement('br'));
});

JSFIDDLE

编辑：

将下面的代码复制到一个新的 HTML 文件，它适用于我：

<html>
  <head>
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      var cat = function(json) {
       var categories = json.feed.category;
       var lst = [];
       var listspan = document.createElement('span');
       listspan.id = 'listspan';

       categories
         // get the labels starting with "A" ONLY.
         .filter(function(category) {
           return category.term.toLowerCase().indexOf('a') === 0;
         })
         // not required
         .sort(function(a, b) {
           return +(a.term > b.term) || +(a.term === b.term) - 1;
         })
         // insert a tag to listspan, instead of using string, this way maybe more efficient.
         .forEach(function(category) {
           var a = document.createElement('a');
           a.href = 'search/label/' + category.term;
           a.innerText = category.term;
           listspan.appendChild(a);
           listspan.appendChild(document.createElement('br'));
           lst.push(category.term);
         });

       // insert the list to DOM
       document.getElementById('container').appendChild(listspan);
      }
    </script>
    <div id="container"></div>
    <script src="http://www.chordzone.org/feeds/posts/summary?alt=json&max-results=0&callback=cat"></script>
  </body>
</html>

按字母顺序在博客中创建索引

Create an Index in blogger alphabetically

javascript

jquery

blogger