Question

我有按字母顺序排列的列表-

<ul id="my-list">
  <li>Afghanistan</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>Belgium</li>
  <li>Belize</li>
  <li>Brazil</li>
  <li>Canada</li>
  <li>Chile</li>
  <li>Columbia</li>
  ...
</ul>

我需要做的是在每个新字母开始处动态添加字母分隔符-

<ul id="my-list">
  <div>A</div>
  <li>Afghanistan</li>
  <li>Albania</li>
  <li>Algeria</li>
  <div>B</div>
  <li>Belgium</li>
  <li>Belize</li>
  <li>Brazil</li>
  <div>C</div>
  <li>Canada</li>
  <li>Chile</li>
  <li>Columbia</li>
  <div>D</div>
  ...
</ul>

这可能吗？

Answer 1

当然可以。您当然应该亲自检查这些内容，但这是一种可行的方法。

const list = Array.from(document.querySelector('#my-list').children);
list.forEach(i => {
	const letter = i.innerHTML.charAt(0);
	if (!accountedFor(letter)) i.insertAdjacentHTML('beforebegin', `<div>${letter}</div>`); 
});

function accountedFor(letter) {
	return document.querySelector('#my-list').innerHTML.includes(`<div>${letter}</div>`);
}

<ul id="my-list">
	<li>Afghanistan</li>
	<li>Albania</li>
	<li>Algeria</li>
	<li>Belgium</li>
	<li>Belize</li>
	<li>Brazil</li>
	<li>Canada</li>
	<li>Chile</li>
	<li>Columbia</li>
</ul>

Answer 2

如果您可以通过插入包含相同国家/地区名称的data-属性来稍微更改标记，例如

<ul id="countries">
  <li data-country="Afghanistan">Afghanistan</li>
  <li data-country="Albania">Albania</li>
  <li data-country="Algeria">Algeria</li>
  <li data-country="Belgium">Belgium</li>
  <li data-country="Belize">Belize</li>
  <li data-country="Brazil">Brazil</li>
  <li data-country="Canada">Canada</li>
  <li data-country="Chile">Chile</li>
</ul>

您可以像这样使用CSS

li:first-child:before,
[data-country^="A"] + :not([data-country^="A"]):before,
[data-country^="B"] + :not([data-country^="B"]):before,
...,
[data-country^="Y"] + :not([data-country^="Y"]):before {
  content: attr(data-country);
  display: block;
  font-size: inherit;
  margin-left: -1em;
  overflow: hidden;
  width: 2em;
  letter-spacing: 100vw;
}

基本上使用此解决方案，您为每个字母写了第一个data-country属性，但是由于有巨大的letter-spacing和一个隐藏的overflow，您只显示了国名的第一个字母。

Demo

请注意，如果您无法手动更改标记，则仍然可以通过这样的JS通过动态添加该data-country属性来使用此方法

let countries = document.querySelectorAll('#countries li');
[...countries].forEach((country) => {
  country.dataset.country = country.textContent;
});

没有无效或多余的标记，在最坏的情况下只是一些JavaScript

Answer 3

我在JQuery中做了一个简单的解决方案。该代码将动态添加第一个字母。
参见：https://codepen.io/nisaifudeen/pen/PyWYjQ

jQuery

//Taking Full <li>
var item = $('#my-list').find('li');
var currentLetter = "";


// Each item
item.each(function(e, item){
  //e is the index
  // Item is the element
  var firstLetter = $(item).html().charAt(0);

  //Condition for not to add the header multiple times
  if(currentLetter !== firstLetter){
    $('<li class="header-set"><p>' + firstLetter + '</p> 
   </li>').insertBefore($(item));    
  }

  currentLetter = firstLetter;

});

您可以使用.each()函数。

将分频器添加到按字母顺序排列的列表

3 个答案: