javascript - 将索引字母添加到 JavaScript 列表

Question

感谢您的回答，我一直致力于从带有复选框的对象生成列表，但我注意到列表越大，用户越难找到项目。那么，我怎样才能让这个列表看起来更像图像呢？在侧面添加索引字母。

const myObjects = {
  Ana: 99,
  Jhon: 99,
  Carla: 99,
  George: 99,
  Luis: 99,
  Mario: 99,
  Brandy: 99,
  Gin: 99,
  Ann: 99,
  Arnold: 99,
  Coffee: 99,
  Karl: 99,
  Kevin: 99,
  Kurt: 99,


}

//Create an arry from Object Keys and display it
let NameDataBase = []
NameDataBase = Object.keys(myObjects);

//Sort ascending
NameDataBase.sort();

//Create CheckBox and use NameDataBase for labels
var myDiv = document.getElementById("cboxes");

for (var i = 0; i < NameDataBase.length; i++) {

  var checkBox = document.createElement("input");
  var label = document.createElement("id");
  var br = document.createElement('br');
  checkBox.type = "checkbox";
  checkBox.value = NameDataBase[i];
  checkBox.id = NameDataBase[i];
  myDiv.appendChild(checkBox);
  myDiv.appendChild(label);
  myDiv.appendChild(br);

  label.appendChild(document.createTextNode(NameDataBase[i]));
}

<div id="cboxes"></div>

标签： javascript

Answer 1

在您的循环中，测试您是否处于第一次迭代，或者您要进行的迭代是否开始一个新字母，如果是，则输出该字母：

if ( ! i || ( NameDataBase[i][0] != NameDataBase[i-1][0] ) ) {
  myDiv.appendChild(document.createTextNode(NameDataBase[i][0]));
}

这个测试进入你的循环：

for (var i = 0; i < NameDataBase.length; i++) {

  var checkBox = document.createElement("input");
  var label = document.createElement("id");
  var br = document.createElement('br');
  checkBox.type = "checkbox";
  checkBox.value = NameDataBase[i];
  checkBox.id = NameDataBase[i];
  
  // Test if we're at the first iteration, or if this iteration's name starts with a different letter from the previous iteration:
  if ( ! i || ( NameDataBase[i][0] != NameDataBase[i-1][0] ) ) {
    myDiv.appendChild(document.createTextNode(NameDataBase[i][0]));
  }

  myDiv.appendChild(checkBox);
  myDiv.appendChild(label);
  myDiv.appendChild(br);

  label.appendChild(document.createTextNode(NameDataBase[i]));
}

如果您希望它的格式不同，您可以改为输出表格标签，但这应该会给您一个大致的想法。