文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何确保正确的文本内容呈现成特定的列表项目‘：：在伪元素之前？

问如何确保正确的文本内容呈现成特定的列表项目‘：：在伪元素之前？
EN

Stack Overflow用户
提问于 2022-09-27 12:09:09
回答 2查看 97关注 0票数 0

我想在子菜单的每个第一个元素中添加一个活动类(不是所有li的元素，而是来自一堆带有相同首字母的li's的第一个元素)。把标签加为A，B，C--我用css实现了这一点，但问题是，它一直在向所有的元素添加标签，因为我只想把标签添加到第一个元素。例如，布里特尔，布里蒂亚纳，青铜-它将添加活跃类的第一B只，与其他相同。

我该怎么做？

​

代码语言：javascript
复制
.groupmenu-drop {
  max-width: 900px;
  margin: auto;
  column-count: 4;
  counter-reset: alphabeticList;
}
@media (max-width: 767px) {
  .groupmenu-drop {
    column-count: 1;
    margin-left: 40px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .groupmenu-drop {
    column-count: 2;
    margin-left: 50px;
  }
}
.groupmenu-drop > .level1 {
  position: relative;
  padding: 0 0 14px !important;
  counter-increment: alphabeticList;
}
.groupmenu-drop > .level1 {
  padding-bottom: 5px;
}
.groupmenu-drop > .level1 a {
  font: 600 14px/30px 'Open Sans', sans-serif;
  letter-spacing: 0px;
  color: #166665;
}
.groupmenu-drop .level1:before {
  content: counter(alphabeticList, upper-alpha);
  position: absolute;
  top: 3px;
  left: -40px;
  border: 2px solid #166665;
  text-align: center;
  border-radius: 7px;
  font: bold 21px/34px 'Open Sans', sans-serif;
  letter-spacing: 0px;
  color: #095352;
  width: 27px;
  height: 27px;
  line-height: 23px;
}
.groupmenu-drop .level1:first-child:before {
  background-color: #166665;
  color: #fef6eb;
}
代码语言：javascript
复制
<ul class="groupmenu-drop slidedown">
  <li class="level1 nav-1 item first">
    <a
      class="menu-link"
      href="/brands/angelcare.html"
      ><span>Angelcare</span></a
    >
  </li>
  <li class="level1 nav-2 item">
    <a
      class="menu-link"
      href="/brands/baby-art.html"
      ><span>Baby Art</span></a
    >
  </li>
  <li class="level1 nav-3 item">
    <a
      class="menu-link"
      href="/brands/barbie.html"
      ><span>Barbie</span></a
    >
  </li>
  <li class="level1 nav-4 item">
    <a
      class="menu-link"
      href="/brands/bibado.html"
      ><span>Bibado</span></a
    >
  </li>
  <li class="level1 nav-5 item">
    <a
      class="menu-link"
      href="/brands/boon.html"
      ><span>Boon</span></a
    >
  </li>
  <li class="level1 nav-6 item">
    <a
      class="menu-link"
      href="/brands/braun.html"
      ><span>Braun</span></a
    >
  </li>
  <li class="level1 nav-7 item">
    <a
      class="menu-link"
      href="/brands/diono.html"
      ><span>Diono</span></a
    >
  </li>
  <li class="level1 nav-8 item">
    <a
      class="menu-link"
      href="/brands/disney.html"
      ><span>Disney</span></a
    >
  </li>
  <li class="level1 nav-9 item">
    <a
      class="menu-link"
      href="/brands/dorel.html"
      ><span>Dorel</span></a
    >
  </li>
  <li class="level1 nav-10 item">
    <a
      class="menu-link"
      href="/brands/dr-brown-s.html"
      ><span>Dr Brown's</span></a
    >
  </li>
  <li class="level1 nav-11 item">
    <a
      class="menu-link"
      href="/brands/dreambaby.html"
      ><span>Dreambaby</span></a
    >
  </li>
  <li class="level1 nav-12 item">
    <a
      class="menu-link"
      href="/brands/dreamgenii.html"
      ><span>Dreamgenii</span></a
    >
  </li>
  <li class="level1 nav-13 item">
    <a
      class="menu-link"
      href="/brands/dumbo.html"
      ><span>Dumbo</span></a
    >
  </li>
  <li class="level1 nav-14 item">
    <a
      class="menu-link"
      href="/brands/earth-friendly-baby.html"
      ><span>Earth Friendly Baby</span></a
    >
  </li>
  <li class="level1 nav-15 item">
    <a
      class="menu-link"
      href="/brands/east-coast.html"
      ><span>East Coast</span></a
    >
  </li>
  <li class="level1 nav-16 item">
    <a
      class="menu-link"
      href="/brands/fisher-price.html"
      ><span>Fisher-Price</span></a
    >
  </li>
  <li class="level1 nav-17 item">
    <a
      class="menu-link"
      href="/brands/fisher-price-little-people.html"
      ><span>Fisher-Price Little People</span></a
    >
  </li>
  <li class="level1 nav-18 item">
    <a
      class="menu-link"
      href="/brands/flair.html"
      ><span>Flair</span></a
    >
  </li>
  <li class="level1 nav-19 item">
    <a
      class="menu-link"
      href="/brands/gift-wrap-accessories.html"
      ><span>Gift Wrap Accessories</span></a
    >
  </li>
  <li class="level1 nav-20 item">
    <a
      class="menu-link"
      href="/brands/halilit.html"
      ><span>Halilit</span></a
    >
  </li>
  <li class="level1 nav-21 item">
    <a
      class="menu-link"
      href="/brands/hey-clay.html"
      ><span>Hey Clay</span></a
    >
  </li>
  <li class="level1 nav-22 item">
    <a
      class="menu-link"
      href="/brands/hot-wheels.html"
      ><span>Hot Wheels</span></a
    >
  </li>
  <li class="level1 nav-23 item">
    <a
      class="menu-link"
      href="/brands/infantino.html"
      ><span>Infantino</span></a
    >
  </li>
  <li class="level1 nav-24 item">
    <a
      class="menu-link"
      href="/brands/janod.html"
      ><span>Janod</span></a
    >
  </li>
  <li class="level1 nav-25 item">
    <a
      class="menu-link"
      href="/brands/kaloo.html"
      ><span>Kaloo</span></a
    >
  </li>
  <li class="level1 nav-26 item">
    <a
      class="menu-link"
      href="/brands/keel-toys.html"
      ><span>Keel Toys</span></a
    >
  </li>
  <li class="level1 nav-27 item">
    <a
      class="menu-link"
      href="/brands/lalaboom.html"
      ><span>Lalaboom</span></a
    >
  </li>
  <li class="level1 nav-28 item">
    <a
      class="menu-link"
      href="/brands/lamaze.html"
      ><span>Lamaze</span></a
    >
  </li>
  <li class="level1 nav-29 item">
    <a
      class="menu-link"
      href="/brands/lansinoh.html"
      ><span>Lansinoh</span></a
    >
  </li>
  <li class="level1 nav-30 item">
    <a
      class="menu-link"
      href="/brands/leap-frog.html"
      ><span>Leap Frog</span></a
    >
  </li>
  <li class="level1 nav-31 item">
    <a
      class="menu-link"
      href="/brands/lindam.html"
      ><span>Lindam</span></a
    >
  </li>
  <li class="level1 nav-32 item">
    <a
      class="menu-link"
      href="/brands/little-bird-told-me.html"
      ><span>Little Bird Told Me</span></a
    >
  </li>
  <li class="level1 nav-33 item">
    <a class="menu-link" href="/brands/mam.html"
      ><span>MAM</span></a
    >
  </li>
  <li class="level1 nav-34 item">
    <a
      class="menu-link"
      href="/brands/mattel.html"
      ><span>Mattel</span></a
    >
  </li>
  <li class="level1 nav-35 item">
    <a
      class="menu-link"
      href="/brands/medela.html"
      ><span>Medela</span></a
    >
  </li>
  <li class="level1 nav-36 item">
    <a
      class="menu-link"
      href="/brands/mega-bloks.html"
      ><span>Mega Bloks</span></a
    >
  </li>
  <li class="level1 nav-37 item">
    <a
      class="menu-link"
      href="/brands/milton.html"
      ><span>Milton</span></a
    >
  </li>
  <li class="level1 nav-38 item">
    <a
      class="menu-link"
      href="/brands/munchkin.html"
      ><span>Munchkin</span></a
    >
  </li>
  <li class="level1 nav-39 item">
    <a
      class="menu-link"
      href="/brands/my-garden-baby.html"
      ><span>My Garden Baby</span></a
    >
  </li>
  <li class="level1 nav-40 item">
    <a
      class="menu-link"
      href="/brands/nuby.html"
      ><span>Nuby</span></a
    >
  </li>
  <li class="level1 nav-41 item">
    <a class="menu-link" href="/brands/nuk.html"
      ><span>NUK</span></a
    >
  </li>
  <li class="level1 nav-42 item">
    <a
      class="menu-link"
      href="/brands/philips-avent.html"
      ><span>Philips Avent</span></a
    >
  </li>
  <li class="level1 nav-43 item">
    <a
      class="menu-link"
      href="/brands/plasticine.html"
      ><span>Plasticine</span></a
    >
  </li>
  <li class="level1 nav-44 item">
    <a
      class="menu-link"
      href="/brands/playmobil.html"
      ><span>Playmobil</span></a
    >
  </li>
  <li class="level1 nav-45 item">
    <a
      class="menu-link"
      href="/brands/ragtales.html"
      ><span>Ragtales</span></a
    >
  </li>
  <li class="level1 nav-46 item">
    <a
      class="menu-link"
      href="/brands/safety-first.html"
      ><span>Safety First</span></a
    >
  </li>
  <li class="level1 nav-47 item">
    <a
      class="menu-link"
      href="/brands/schleich.html"
      ><span>Schleich</span></a
    >
  </li>
  <li class="level1 nav-48 item">
    <a
      class="menu-link"
      href="/brands/summer-infant.html"
      ><span>Summer Infant</span></a
    >
  </li>
  <li class="level1 nav-49 item">
    <a
      class="menu-link"
      href="/brands/swaddleme.html"
      ><span>SwaddleMe</span></a
    >
  </li>
  <li class="level1 nav-50 item">
    <a
      class="menu-link"
      href="/brands/taf-toys.html"
      ><span>Taf Toys</span></a
    >
  </li>
  <li class="level1 nav-51 item">
    <a
      class="menu-link"
      href="/brands/thomas-and-friends.html"
      ><span>Thomas and Friends</span></a
    >
  </li>
  <li class="level1 nav-52 item">
    <a
      class="menu-link"
      href="/brands/tiny-love.html"
      ><span>Tiny Love</span></a
    >
  </li>
  <li class="level1 nav-53 item">
    <a
      class="menu-link"
      href="/brands/tommee-tippee.html"
      ><span>Tommee Tippee</span></a
    >
  </li>
  <li class="level1 nav-54 item">
    <a
      class="menu-link"
      href="/brands/tomy.html"
      ><span>Tomy</span></a
    >
  </li>
  <li class="level1 nav-55 item">
    <a
      class="menu-link"
      href="/brands/vicks.html"
      ><span>Vicks</span></a
    >
  </li>
  <li class="level1 nav-56 item">
    <a
      class="menu-link"
      href="/brands/vital-baby.html"
      ><span>Vital Baby</span></a
    >
  </li>
  <li class="level1 nav-57 item">
    <a
      class="menu-link"
      href="/brands/vtech.html"
      ><span>vTech</span></a
    >
  </li>
  <li class="level1 nav-58 item">
    <a
      class="menu-link"
      href="/brands/we-made-me.html"
      ><span>We Made Me</span></a
    >
  </li>
  <li class="level1 nav-59 item">
    <a
      class="menu-link"
      href="/brands/widdop-bingham.html"
      ><span>Widdop Bingham</span></a
    >
  </li>
  <li class="level1 nav-60 item last">
    <a
      class="menu-link"
      href="/brands/winnie-the-pooh.html"
      ><span>Winnie The Pooh</span></a
    >
  </li>
</ul>

​

输出：https://paste.pics/be37c962a84545356f416db149368a92

我想实现像下面这样的屏幕快照：https://paste.pics/ff36dd98eb6fcf126004b581ac466f93

javascript
dom
rendering
pseudo-element
custom-data-attribute
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-09-27 14:31:49

这种方法很简单。

  • 一个查询导航/链接列表的所有直接子类的节点列表. document.querySelectorAll('.groupmenu-drop > li')。
  • 接下来，创建一个Array.from --此节点列表，并将其放入一个由可变列表项元素组成的数组中，每个元素将其文本内容的第一个字母-字符分配为自己的data-first-char-attribute的值。
  • 然后，将一个reduce的所有项放入一个列表项元素数组中，每个元素以与其直接前面的列表项不同的字母开头。
  • 最后，forEach收集了新的第一个字符列表-条目-一个添加了一个相关的类名，如new-first-char。
  • 同时，也会稍微修改一些选择器规则。
代码语言：javascript
复制
- The [`::before` pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) rendering would be covered by a changed rule like ...

.before菜单--删除.char 1.新-新

..。它针对每个以new-first-char类名为特征的列表项，而后者的内容由该元素的data-first-char属性的值呈现。

代码语言：javascript
复制
- The _active_/_selected_ state of such pseudo-elements then just needs to be targeted by ...

.first菜单-下拉.first 1.新建-第一个字符.选定：：在{背景颜色：#166665；颜色：#fef6eb；}

我们必须至少接触到发生伪元素呈现的列表元素，因为人们不能再依赖OP通过counter css-函数进行的原始counter呈现。这是由于OP设计了一个单一的平面/非嵌套列表，通过OP的原始反功能强制对每个列表项进行连续的字母伪元素枚举。

因此，最好只以一个类名(如new-first-char )作为伪元素呈现的目标，其中伪元素的内容从这个元素的data-first-char属性值中呈现出来。

​

代码语言：javascript
复制
function init() {

  const newFirstCharacterItems = Array
    .from(
      document
        .querySelectorAll('.groupmenu-drop > li')
    )
    .map(elmNode => {

      const textContent = elmNode
        .querySelector('a > span')
        ?.textContent ?? '';

      let char = textContent
        .trim()
        // https://www.regular-expressions.info/unicode.html#category
        .match(/\p{L}/u) // first letter character.
        ?.[0] ?? '';

      char = char
        .toUpperCase();

      elmNode
        .dataset
        .firstChar = char;

      return elmNode;
    })
    .reduce(({ currentCharacter = '', result }, elmNode) => {

      const char = elmNode
        .dataset
        .firstChar;

      if (char !== '' && char !== currentCharacter) {

        currentCharacter = char;
        result
          .push(elmNode);
      }
      return { currentCharacter, result };

    }, { result: [] }).result;

    newFirstCharacterItems
      .forEach(elmNode =>
        elmNode
          .classList
          .add('new-first-char')
      );
}

init();
代码语言：javascript
复制
body { margin: 0; zoom: .7; }

.groupmenu-drop {
  max-width: 900px;
  margin: auto;
  column-count: 4;
  counter-reset: alphabeticList;

  /* additional fix */
  list-style: none;
}
@media (max-width: 767px) {
  .groupmenu-drop {
    column-count: 1;
    margin-left: 40px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .groupmenu-drop {
    column-count: 2;
    margin-left: 50px;
  }
}
.groupmenu-drop > .level1 {
  position: relative;
  padding: 0 0 14px !important;
  counter-increment: alphabeticList;
}
.groupmenu-drop > .level1 {
  padding-bottom: 5px;
}
.groupmenu-drop > .level1 a {
  font: 600 14px/30px 'Open Sans', sans-serif;
  letter-spacing: 0px;
  color: #166665;
}

/* slightly changed selector */
.groupmenu-drop .level1.new-first-char::before {
  /*content: counter(alphabeticList, upper-alpha);*/

  /* changed content rendering */
  content: attr(data-first-char);

  position: absolute;
  top: 3px;
  left: -40px;
  border: 2px solid #166665;
  text-align: center;
  border-radius: 7px;
  font: bold 21px/34px 'Open Sans', sans-serif;
  letter-spacing: 0px;
  color: #095352;
  width: 27px;
  height: 27px;
  line-height: 23px;
}
/* slightly changed selector */
.groupmenu-drop .level1.new-first-char.selected::before {
  background-color: #166665;
  color: #fef6eb;
}
代码语言：javascript
复制
<ul class="groupmenu-drop slidedown">
  <li class="level1 nav-1 item">
    <a
      class="menu-link"
      href="/brands/angelcare.html"
      ><span>Angelcare</span></a
    >
  </li>
  <li class="level1 nav-2 item selected">
    <a
      class="menu-link"
      href="/brands/baby-art.html"
      ><span>Baby Art</span></a
    >
  </li>
  <li class="level1 nav-3 item">
    <a
      class="menu-link"
      href="/brands/barbie.html"
      ><span>Barbie</span></a
    >
  </li>
  <li class="level1 nav-4 item">
    <a
      class="menu-link"
      href="/brands/bibado.html"
      ><span>Bibado</span></a
    >
  </li>
  <li class="level1 nav-5 item">
    <a
      class="menu-link"
      href="/brands/boon.html"
      ><span>Boon</span></a
    >
  </li>
  <li class="level1 nav-6 item">
    <a
      class="menu-link"
      href="/brands/braun.html"
      ><span>Braun</span></a
    >
  </li>
  <li class="level1 nav-7 item">
    <a
      class="menu-link"
      href="/brands/diono.html"
      ><span>Diono</span></a
    >
  </li>
  <li class="level1 nav-8 item">
    <a
      class="menu-link"
      href="/brands/disney.html"
      ><span>Disney</span></a
    >
  </li>
  <li class="level1 nav-9 item">
    <a
      class="menu-link"
      href="/brands/dorel.html"
      ><span>Dorel</span></a
    >
  </li>
  <li class="level1 nav-10 item">
    <a
      class="menu-link"
      href="/brands/dr-brown-s.html"
      ><span>Dr Brown's</span></a
    >
  </li>
  <li class="level1 nav-11 item">
    <a
      class="menu-link"
      href="/brands/dreambaby.html"
      ><span>Dreambaby</span></a
    >
  </li>
  <li class="level1 nav-12 item">
    <a
      class="menu-link"
      href="/brands/dreamgenii.html"
      ><span>Dreamgenii</span></a
    >
  </li>
  <li class="level1 nav-13 item">
    <a
      class="menu-link"
      href="/brands/dumbo.html"
      ><span>Dumbo</span></a
    >
  </li>
  <li class="level1 nav-14 item">
    <a
      class="menu-link"
      href="/brands/earth-friendly-baby.html"
      ><span>Earth Friendly Baby</span></a
    >
  </li>
  <li class="level1 nav-15 item">
    <a
      class="menu-link"
      href="/brands/east-coast.html"
      ><span>East Coast</span></a
    >
  </li>
  <li class="level1 nav-16 item selected">
    <a
      class="menu-link"
      href="/brands/fisher-price.html"
      ><span>Fisher-Price</span></a
    >
  </li>
  <li class="level1 nav-17 item">
    <a
      class="menu-link"
      href="/brands/fisher-price-little-people.html"
      ><span>Fisher-Price Little People</span></a
    >
  </li>
  <li class="level1 nav-18 item">
    <a
      class="menu-link"
      href="/brands/flair.html"
      ><span>Flair</span></a
    >
  </li>
  <li class="level1 nav-19 item">
    <a
      class="menu-link"
      href="/brands/gift-wrap-accessories.html"
      ><span>Gift Wrap Accessories</span></a
    >
  </li>
  <li class="level1 nav-20 item">
    <a
      class="menu-link"
      href="/brands/halilit.html"
      ><span>Halilit</span></a
    >
  </li>
  <li class="level1 nav-21 item">
    <a
      class="menu-link"
      href="/brands/hey-clay.html"
      ><span>Hey Clay</span></a
    >
  </li>
  <li class="level1 nav-22 item">
    <a
      class="menu-link"
      href="/brands/hot-wheels.html"
      ><span>Hot Wheels</span></a
    >
  </li>
  <li class="level1 nav-23 item">
    <a
      class="menu-link"
      href="/brands/infantino.html"
      ><span>Infantino</span></a
    >
  </li>
  <li class="level1 nav-24 item">
    <a
      class="menu-link"
      href="/brands/janod.html"
      ><span>Janod</span></a
    >
  </li>
  <li class="level1 nav-25 item">
    <a
      class="menu-link"
      href="/brands/kaloo.html"
      ><span>Kaloo</span></a
    >
  </li>
  <li class="level1 nav-26 item">
    <a
      class="menu-link"
      href="/brands/keel-toys.html"
      ><span>Keel Toys</span></a
    >
  </li>
  <li class="level1 nav-27 item">
    <a
      class="menu-link"
      href="/brands/lalaboom.html"
      ><span>Lalaboom</span></a
    >
  </li>
  <li class="level1 nav-28 item">
    <a
      class="menu-link"
      href="/brands/lamaze.html"
      ><span>Lamaze</span></a
    >
  </li>
  <li class="level1 nav-29 item">
    <a
      class="menu-link"
      href="/brands/lansinoh.html"
      ><span>Lansinoh</span></a
    >
  </li>
  <li class="level1 nav-30 item">
    <a
      class="menu-link"
      href="/brands/leap-frog.html"
      ><span>Leap Frog</span></a
    >
  </li>
  <li class="level1 nav-31 item">
    <a
      class="menu-link"
      href="/brands/lindam.html"
      ><span>Lindam</span></a
    >
  </li>
  <li class="level1 nav-32 item">
    <a
      class="menu-link"
      href="/brands/little-bird-told-me.html"
      ><span>Little Bird Told Me</span></a
    >
  </li>
  <li class="level1 nav-33 item">
    <a class="menu-link" href="/brands/mam.html"
      ><span>MAM</span></a
    >
  </li>
  <li class="level1 nav-34 item">
    <a
      class="menu-link"
      href="/brands/mattel.html"
      ><span>Mattel</span></a
    >
  </li>
  <li class="level1 nav-35 item">
    <a
      class="menu-link"
      href="/brands/medela.html"
      ><span>Medela</span></a
    >
  </li>
  <li class="level1 nav-36 item">
    <a
      class="menu-link"
      href="/brands/mega-bloks.html"
      ><span>Mega Bloks</span></a
    >
  </li>
  <li class="level1 nav-37 item">
    <a
      class="menu-link"
      href="/brands/milton.html"
      ><span>Milton</span></a
    >
  </li>
  <li class="level1 nav-38 item">
    <a
      class="menu-link"
      href="/brands/munchkin.html"
      ><span>Munchkin</span></a
    >
  </li>
  <li class="level1 nav-39 item">
    <a
      class="menu-link"
      href="/brands/my-garden-baby.html"
      ><span>My Garden Baby</span></a
    >
  </li>
  <li class="level1 nav-40 item">
    <a
      class="menu-link"
      href="/brands/nuby.html"
      ><span>Nuby</span></a
    >
  </li>
  <li class="level1 nav-41 item">
    <a class="menu-link" href="/brands/nuk.html"
      ><span>NUK</span></a
    >
  </li>
  <li class="level1 nav-42 item">
    <a
      class="menu-link"
      href="/brands/philips-avent.html"
      ><span>Philips Avent</span></a
    >
  </li>
  <li class="level1 nav-43 item">
    <a
      class="menu-link"
      href="/brands/plasticine.html"
      ><span>Plasticine</span></a
    >
  </li>
  <li class="level1 nav-44 item">
    <a
      class="menu-link"
      href="/brands/playmobil.html"
      ><span>Playmobil</span></a
    >
  </li>
  <li class="level1 nav-45 item">
    <a
      class="menu-link"
      href="/brands/ragtales.html"
      ><span>Ragtales</span></a
    >
  </li>
  <li class="level1 nav-46 item">
    <a
      class="menu-link"
      href="/brands/safety-first.html"
      ><span>Safety First</span></a
    >
  </li>
  <li class="level1 nav-47 item">
    <a
      class="menu-link"
      href="/brands/schleich.html"
      ><span>Schleich</span></a
    >
  </li>
  <li class="level1 nav-48 item">
    <a
      class="menu-link"
      href="/brands/summer-infant.html"
      ><span>Summer Infant</span></a
    >
  </li>
  <li class="level1 nav-49 item">
    <a
      class="menu-link"
      href="/brands/swaddleme.html"
      ><span>SwaddleMe</span></a
    >
  </li>
  <li class="level1 nav-50 item">
    <a
      class="menu-link"
      href="/brands/taf-toys.html"
      ><span>Taf Toys</span></a
    >
  </li>
  <li class="level1 nav-51 item">
    <a
      class="menu-link"
      href="/brands/thomas-and-friends.html"
      ><span>Thomas and Friends</span></a
    >
  </li>
  <li class="level1 nav-52 item">
    <a
      class="menu-link"
      href="/brands/tiny-love.html"
      ><span>Tiny Love</span></a
    >
  </li>
  <li class="level1 nav-53 item">
    <a
      class="menu-link"
      href="/brands/tommee-tippee.html"
      ><span>Tommee Tippee</span></a
    >
  </li>
  <li class="level1 nav-54 item">
    <a
      class="menu-link"
      href="/brands/tomy.html"
      ><span>Tomy</span></a
    >
  </li>
  <li class="level1 nav-55 item">
    <a
      class="menu-link"
      href="/brands/vicks.html"
      ><span>Vicks</span></a
    >
  </li>
  <li class="level1 nav-56 item">
    <a
      class="menu-link"
      href="/brands/vital-baby.html"
      ><span>Vital Baby</span></a
    >
  </li>
  <li class="level1 nav-57 item">
    <a
      class="menu-link"
      href="/brands/vtech.html"
      ><span>vTech</span></a
    >
  </li>
  <li class="level1 nav-58 item">
    <a
      class="menu-link"
      href="/brands/we-made-me.html"
      ><span>We Made Me</span></a
    >
  </li>
  <li class="level1 nav-59 item">
    <a
      class="menu-link"
      href="/brands/widdop-bingham.html"
      ><span>Widdop Bingham</span></a
    >
  </li>
  <li class="level1 nav-60 item last">
    <a
      class="menu-link"
      href="/brands/winnie-the-pooh.html"
      ><span>Winnie The Pooh</span></a
    >
  </li>
</ul>

​

票数 1
EN

Stack Overflow用户

发布于 2022-09-27 12:48:43

假设HTML列表按字母顺序排列。我将首先使用查询选择器方法检索列表。然后循环并比较内部的文本，如果字符不同，则向元素中添加一个active类。

代码语言：javascript
复制
<div class="elate_brands">
    <div class="groupdrop-link">
        <div class="mainbrand-item item">
            <a class="menu-link" href="#"><span>Albama</span></a>
        </div>
        <div class="mainbrand-item item">
            <a class="menu-link" href="#"><span>Brittle</span></a>
        </div>
        <div class="mainbrand-item item">
            <a class="menu-link" href="#"><span>Beat</span></a>
        </div>
    </div>
</div>

<script>
    let elements = document.querySelectorAll('.mainbrain-item > .menu-link > span');

    let firstLeter = '';
    for (const element of elements) {
        if(firstLeter !== element.text[0].toLowerCase()){

            // select the parent element which is the div with mainbraind-item class
            element.parentElement.parentElement.classList.add('active');
            firstLeter = element.text[0].toLowerCase();
        }
    }
</script>

根据所提供的结构OP进行更新。我在css代码中添加了.active选择器。

代码语言：javascript
复制
     <style>
        /* ..... */

        .groupmenu-drop .level1.active:before {
            content: counter(alphabeticList, upper-alpha);
            position: absolute;
            top: 3px;
            left: -40px;
            border: 2px solid #166665;
            text-align: center;
            border-radius: 7px;
            font: bold 21px/34px 'Open Sans', sans-serif;
            letter-spacing: 0px;
            color: #095352;
            width: 27px;
            height: 27px;
            line-height: 23px;
        }

        /* ... */
    </style>


    <ul class="groupmenu-drop slidedown">
        <li class="level1 nav-1 item first">
            <a class="menu-link" href="/brands/angelcare.html"><span>Angelcare</span></a>
        </li>
        <li class="level1 nav-2 item">
            <a class="menu-link" href="/brands/baby-art.html"><span>Baby Art</span></a>
        </li>
        <li class="level1 nav-3 item">
            <a class="menu-link" href="/brands/barbie.html"><span>Barbie</span></a>
        </li>
    </ul>


    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // code...
            let elements = document.querySelectorAll('.groupmenu-drop > .item > .menu-link > span');

            let firstLeter = '';
            for (const element of elements) {
                if (firstLeter !== element.textContent[0].toLowerCase()) {
                    let level1El = element.parentElement.parentElement;
                    level1El.classList.add('active');
                    firstLeter = element.textContent[0].toLowerCase();
                }
            }
        });
    </script>
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/73867310

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档