javascript - 按字母顺序排列带标题的 HTML 列表

Question

我希望按字母顺序排列 HTML 列表，但每个字母后面都会有一个 <hr />标签和标题，指示新字母列表。

如果我不够清楚，请修改，我有我的 list ......

<ul>
  <li><a href="#/"> john-smith/</a></li>
  <li><a href="#/"> joe-smith/</a></li>
  <li><a href="#/"> glen-smith/</a></li>
  <li><a href="#/"> daniel-smith/</a></li>
  <li><a href="#/"> johnny-smith/</a></li>
</ul>

现在，我想要一些 JS 代码来按字母顺序组织这个列表，并为每个新字母提供标题和行；因此它会给出类似于以下的结果:

<ul>
  <hr />
  <h3>D</h3>
  <li><a href="#/"> daniel-smith/</a></li>
  <hr />
  <h3>G</h3>
  <li><a href="#/"> glen-smith/</a></li>
  <hr />
  <h3>J</h3>
  <li><a href="#/"> joe-smith/</a></li>
  <li><a href="#/"> johnny-smith/</a></li>
  <li><a href="#/"> joe-smith/</a></li>
</ul>

我确实尝试自己这样做，但我根本做不到，我对 JavaScript 还比较陌生! 谢谢。

Answer 1

由于将 h3 和 hr 放入 ul 标记内无效，因此我使用 css 创建了此样式。刚刚添加了一个带有 splitter 类的 li 节点。

解决方案有两个步骤:

1. 对列表进行排序(使用 .sort() 方法)
2. 创建标题。

阅读代码，如果有不清楚的地方请告诉我。

var list = $('ul'),
    items = $('li', list);

// sort the list
var sortedItems = items.get().sort(function(a, b) {
  var aText = $.trim($(a).text().toUpperCase()),
      bText = $.trim($(b).text().toUpperCase());
  
   return aText.localeCompare(bText);
});

list.append(sortedItems); 

// create the titles
var lastLetter = '';
list.find('li').each(function() {
  var $this = $(this),
      text = $.trim($this.text()),
      firstLetter = text[0];

  if (firstLetter != lastLetter) {
    $this.before('<li class="splitter">' + firstLetter);
    lastLetter = firstLetter;
  }
});

.splitter {
  border-top: 1px solid;
  font-size: 1.25em;
  list-style: none;
  padding-top: 10px;
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#/"> john-smith/</a></li>
  <li><a href="#/"> joe-smith/</a></li>
  <li><a href="#/"> glen-smith/</a></li>
  <li><a href="#/"> daniel-smith/</a></li>
  <li><a href="#/"> johnny-smith/</a></li>
</ul>