主頁 > .NET開發 > 如何確保將正確的文本內容呈現到某些串列項的::before偽元素中？

如何確保將正確的文本內容呈現到某些串列項的::before偽元素中？

2022-09-29 22:50:33 .NET開發

我想為子選單的每個第一個元素添加一個活動類（不是所有的 li，只有一堆 li 中的第一個具有相同的首字母）。并將標簽添加為 A、B、C ----- 我正在使用 css 實作這一點，但問題是它不斷向所有人添加標簽，因為我希望標簽只添加到第一個元素。例如 Brittle、britiana、bronze - 它只會將活動類添加到第一個 B 并且與其他類相同。

我該怎么辦？

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

uj5u.com熱心網友回復：

方法很簡單。

  • 查詢所有導航/鏈接串列的直接子節點的節點串列 ... document.querySelectorAll('.groupmenu-drop > li')。

  • 接下來創建一個Array.fromthis 節點串列并將maps其發送到一個變異串列項元素的陣列中，每個元素都被分配其文本內容的第一個字母字符作為自己的屬性的值data-first-char。

  • 然后將reduce所有專案放入一個串列項元素陣列中，每個元素都以不同于其直接前面的串列項的字母開頭。

  • 最后forEach收集到新的第一個字串列項，添加一個相關的類名，如new-first-char.

  • 同時，我們會稍微改變一些選擇器規則

    • ::before偽元素渲染將被一個改變的規則覆寫，比如......

      .groupmenu-drop .level1.new-first-char::before {
   content: attr(data-first-char);
}

      ...它針對具有 class-name 的每個串列項，并且后者的內容由該元素的屬性new-first-char的值呈現。data-first-char

    • 此類偽元素的活動/選定狀態只需要...

      .groupmenu-drop .level1.new-first-char.selected::before {
   background-color: #166665;
   color: #fef6eb;
}

至少必須觸摸發生偽元素渲染的串列元素，因為不能再依賴 OP通過css-函式content進行的原始渲染。這是由于 OP 設計了單個平面/非嵌套串列，OP 的原始反功能強制每個串列項的連續字母偽元素列舉。counter

因此，最好只通過類名來定位偽元素渲染，就像new-first-char偽元素的內容從這個元素的data-first-char屬性值中渲染出來的那樣。

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

uj5u.com熱心網友回復：

假設 HTML 串列按字母順序排列。我將首先使用查詢選擇器方法檢索串列。然后回圈并比較里面的文本，如果字符不同，則active向元素添加一個類。

<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 選擇器

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510220.html

標籤：javascriptdom渲染伪元素自定义数据属性

上一篇：將Rapier.js渲染到DOM時碰撞檢測未正確對齊

下一篇：畫布，用輸入資料制作角落

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • WebAPI簡介

    Web體系結構： 有三個核心：資源(resource)，URL(統一資源識別符號)和表示 他們的關系是這樣的：一個資源由一個URL進行標識，HTTP客戶端使用URL定位資源，表示是從資源回傳資料，媒體型別是資源回傳的資料格式。 接下來我們說下HTTP. HTTP協議的系統是一種無狀態的方式，使用請求/ ......

    uj5u.com 2020-09-09 22:07:47 more
  • asp.net core 3.1 入口：Program.cs中的Main函式

    本文分析Program.cs 中Main()函式中代碼的運行順序分析asp.net core程式的啟動，重點不是剖析原始碼，而是理清程式開始時執行的順序。到呼叫了哪些實體，哪些法方。asp.net core 3.1 的程式入口在專案Program.cs檔案里，如下。ususing System; us ......

    uj5u.com 2020-09-09 22:07:49 more
  • asp.net網站作為websocket服務端的應用該如何寫

    最近被websocket的一個問題困擾了很久，有一個需求是在web網站中搭建websocket服務。客戶端通過網頁與服務器建立連接，然后服務器根據ip給客戶端網頁發送資訊。 其實，這個需求并不難，只是剛開始對websocket的內容不太了解。上網搜索了一下，有通過asp.net core 實作的、有 ......

    uj5u.com 2020-09-09 22:08:02 more
  • ASP.NET 開源匯入匯出庫Magicodes.IE Docker中使用

    Magicodes.IE在Docker中使用 更新歷史 2019.02.13 【Nuget】版本更新到2.0.2 【匯入】修復單列匯入的Bug，單元測驗“OneColumnImporter_Test”。問題見（https://github.com/dotnetcore/Magicodes.IE/is ......

    uj5u.com 2020-09-09 22:08:05 more
  • 在webform中使用ajax

    如果你用過Asp.net webform， 說明你也算是.NET 開發的老兵了。WEBform應該是2011 2013左右，當時還用visual studio 2005、 visual studio 2008。后來基本都用的是MVC。 如果是新開發的專案，估計沒人會用webform技術。但是有些舊版 ......

    uj5u.com 2020-09-09 22:08:50 more
  • iis添加asp.net網站，訪問提示：由于擴展配置問題而無法提供您請求的

    今天在iis服務器配置asp.net網站，遇到一個問題，記錄一下： 問題：由于擴展配置問題而無法提供您請求的頁面。如果該頁面是腳本，請添加處理程式。如果應下載檔案，請添加 MIME 映射。 WindowServer2012服務器，添加角色安裝完.netframework和iis之后，運行aspx頁面 ......

    uj5u.com 2020-09-09 22:10:00 more
  • WebAPI-處理架構

    帶著問題去思考，大家好！ 問題1：HTTP請求和回傳相應的HTTP回應資訊之間發生了什么？ 1：首先是最底層，托管層，位于WebAPI和底層HTTP堆疊之間 2：其次是 訊息處理程式管道層，這里比如日志和快取。OWIN的參考是將訊息處理程式管道的一些功能下移到堆疊下端的OWIN中間件了。 3：控制器處理 ......

    uj5u.com 2020-09-09 22:11:13 more
  • 微信門戶開發框架-使用指導說明書

    微信門戶應用管理系統，采用基于 MVC + Bootstrap + Ajax + Enterprise Library的技術路線，界面層采用Boostrap + Metronic組合的前端框架，資料訪問層支持Oracle、SQLServer、MySQL、PostgreSQL等資料庫。框架以MVC5，... ......

    uj5u.com 2020-09-09 22:15:18 more
  • WebAPI-HTTP編程模型

    帶著問題去思考，大家好！它是什么？它包含什么？它能干什么？ 訊息 HTTP編程模型的核心就是訊息抽象，表示為：HttPRequestMessage,HttpResponseMessage.用于客戶端和服務端之間交換請求和回應訊息。 HttpMethod類包含了一組靜態屬性： private stat ......

    uj5u.com 2020-09-09 22:15:23 more
  • 部署WebApi隨筆

    一、跨域 NuGet參考Microsoft.AspNet.WebApi.Cors WebApiConfig.cs中配置： // Web API 配置和服務 config.EnableCors(new EnableCorsAttribute("*", "*", "*")); 二、清除默認回傳XML格式 ......

    uj5u.com 2020-09-09 22:15:48 more
最新发布
  • C#多執行緒學習(二) 如何操縱一個執行緒

    <a href="https://www.cnblogs.com/x-zhi/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/2943582/20220801082530.png" alt="" /></...

    uj5u.com 2023-04-19 09:17:20 more
  • C#多執行緒學習(二) 如何操縱一個執行緒

    C#多執行緒學習(二) 如何操縱一個執行緒 執行緒學習第一篇：C#多執行緒學習(一) 多執行緒的相關概念 下面我們就動手來創建一個執行緒，使用Thread類創建執行緒時，只需提供執行緒入口即可。（執行緒入口使程式知道該讓這個執行緒干什么事） 在C#中，執行緒入口是通過ThreadStart代理（delegate）來提供的 ......

    uj5u.com 2023-04-19 09:16:49 more
  • 記一次 .NET某醫療器械清洗系統 卡死分析

    <a href="https://www.cnblogs.com/huangxincheng/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/214741/20200614104537.png" alt="" /&g...

    uj5u.com 2023-04-18 08:39:04 more
  • 記一次 .NET某醫療器械清洗系統 卡死分析

    一：背景 1. 講故事 前段時間協助訓練營里的一位朋友分析了一個程式卡死的問題，回過頭來看這個案例比較經典，這篇稍微整理一下供后來者少踩坑吧。 二：WinDbg 分析 1. 為什么會卡死 因為是表單程式，理所當然就是看主執行緒此時正在做什么? 可以用 ~0s ; k 看一下便知。 0:000> k # ......

    uj5u.com 2023-04-18 08:33:10 more
  • SignalR, No Connection with that ID，IIS

    <a href="https://www.cnblogs.com/smartstar/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/u36196.jpg" alt="" /></a>...

    uj5u.com 2023-03-30 17:21:52 more
  • 一次對pool的誤用導致的.net頻繁gc的診斷分析

    <a href="https://www.cnblogs.com/dotnet-diagnostic/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/3115652/20230225090434.png" alt=""...

    uj5u.com 2023-03-28 10:15:33 more
  • 一次對pool的誤用導致的.net頻繁gc的診斷分析

    <a href="https://www.cnblogs.com/dotnet-diagnostic/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/3115652/20230225090434.png" alt=""...

    uj5u.com 2023-03-28 10:13:31 more
  • C#遍歷指定檔案夾中所有檔案的3種方法

    <a href="https://www.cnblogs.com/xbhp/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/957602/20230310105611.png" alt="" /></a&...

    uj5u.com 2023-03-27 14:46:55 more
  • C#/VB.NET：如何將PDF轉為PDF/A

    <a href="https://www.cnblogs.com/Carina-baby/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/2859233/20220427162558.png" alt="" />...

    uj5u.com 2023-03-27 14:46:35 more
  • 武裝你的WEBAPI-OData聚合查詢

    <a href="https://www.cnblogs.com/podolski/" target="_blank"><img width="48" height="48" class="pfs" src="https://pic.cnblogs.com/face/616093/20140323000327.png" alt="" /><...

    uj5u.com 2023-03-27 14:46:16 more

Copyright © 2010-2020 有解無憂