Question

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

要修改，如果我不够清楚，我有我的清单......

＆＃13;

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

＆＃13;

现在，我希望有一些JS代码可以按字母顺序组织这个列表，并提供一个标题＆amp;每封新信的行;因此它的结果有点类似于：

＆＃13;

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

＆＃13;

我确实尝试过这样做，但我根本无法做到，我对JavaScript来说相对较新！感谢。

Answer 1

您需要jquery和以下代码，但请务必从上面列表的每一行（名称前）中删除空格：

var a = [];
//Loop through each row
$( "li" ).each(function( index ) {
  //populate the array with their names
  a.push($( this ).text());
});
//Alphabetically sort the array
a.sort();
//Clear the existing list
$("ul").html("");
//Start with a random character
var current_letter='1';
//loop through each row of the sorted array
for (var i = 0; i < a.length; i++) {
  //if a new first character is detected, add its corresponding html
   if(a[i].charAt(0)!=current_letter){
       $("ul").append("<hr /><h3>"+a[i].charAt(0)+"</h3>");
       current_letter=a[i].charAt(0);
   }
    //add the list item to the list
    $("ul").append("<li><a href='#/'>"+a[i]+"</a></li>");
}

Answer 2

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

您有两个步骤：

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

阅读代码，如果不清楚，请告诉我。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: