БЛОГ НА HUSL


jquery как из списка вытащить первую букву на экран

Автор вопроса: Tilea Website

помогите пожалуйста кодом.

Как из списка вытащить первую букву на экран, и сделать ее заголовком для списка с словами первой буквы

Пример: введите сюда описание изображения

Пример моего кода:

  $(function(){
    $('ul#recipes li').each(function(index, element){
      var mylet = $(this).attr('class');
      alert(mylet)
      // alert(mylet.substring(0, 2))
      // $(element).addClass('bg-danger')
        // alert($(this).attr('class'));
      if ($(this).is(".b")) {
        return false;
      }
    })
  })
.assortment ul{
    display: block;
}

.assortment ul li{
    line-height: 1;
}

.assortment ul li a{
    padding: 0 0;
    margin: .16rem 0;
    line-height: 1;
    display: inline-block;
    font-size: 14px;
    color: black;
}
.assortment ul li a:hover{
    color: #E5097F;
}
@media (max-width: 579px){
    .assortment ul li a{
        line-height: 1.3;
    }
}
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="https://getbootstrap.com/dist/js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>

<div class="assortment">
  <ul class="nav flex-column" id="recipes">
      <li class="7"> <a href="brend/7days" class="nav-link">7DAYS</a> </li>
      <li class="a"> <a href="brend/aevit-by-librederm" class="nav-link">AEVIT BY LIBREDERM</a> </li>
      <li class="a"> <a href="brend/alan-hadash" class="nav-link">Alan Hadash</a> </li>
      <li class="a"> <a href="brend/alan-hadash-2" class="nav-link">ALAN HADASH</a> </li>
      <li class="a"> <a href="brend/amberica" class="nav-link">AMBERICA</a> </li>
      <li class="a"> <a href="brend/aravia-2" class="nav-link">ARAVIA</a> </li>
      <li class="b"> <a href="brend/belkosmex" class="nav-link">BELKOSMEX</a> </li>
      <li class="b"> <a href="brend/bella" class="nav-link">BELLA</a> </li>
      <li class="b"> <a href="brend/bes" class="nav-link">BES</a> </li>
      <li class="b"> <a href="brend/botavikos" class="nav-link">BOTAVIKOS</a> </li>
      <li class="c"> <a href="brend/cafe-cafe" class="nav-link">CAFE CAFE</a> </li>
      <li class="c"> <a href="brend/cafe-mimi" class="nav-link">CAFE MIMI</a> </li>
      <li class="d"> <a href="brend/deonat" class="nav-link">DEONAT</a> </li>
      <li class="d"> <a href="brend/deonica" class="nav-link">DEONICA</a> </li>
      <li class="d"> <a href="brend/depiltouch" class="nav-link">Depiltouch</a> </li>
      <li class="d"> <a href="brend/dnc" class="nav-link">DNC</a> </li>
      <li class="e"> <a href="brend/eco-laboratorie-2" class="nav-link">ECO LABORATORIE</a> </li>
      <li class="e"> <a href="brend/ekel" class="nav-link">EKEL</a> </li>
      <li class="e"> <a href="brend/epica" class="nav-link">EPICA</a> </li>
      <li class="e"> <a href="brend/estel" class="nav-link">ESTEL</a> </li>
      <li class="f"> <a href="brend/fabrik-cosmetology" class="nav-link">Fabrik Cosmetology</a> </li>
      <li class="f"> <a href="brend/fabrik-cosmetology-2" class="nav-link">FABRIK COSMETOLOGY</a> </li>
      <li class="g"> <a href="brend/greenini" class="nav-link">GREENINI</a> </li>
      <li class="h"> <a href="brend/hadalabo" class="nav-link">HADALABO</a> </li>
      <li class="j"> <a href="brend/jeanmishel" class="nav-link">JEANMISHEL</a> </li>
      <li class="k"> <a href="brend/kapous" class="nav-link">KAPOUS</a> </li>
      <li class="l"> <a href="brend/lamel" class="nav-link">LAMEL</a> </li>
      <li class="l"> <a href="brend/liv-delano" class="nav-link">LIV DELANO</a> </li>
      <li class="l"> <a href="brend/luxvisage" class="nav-link">LUXVISAGE</a> </li>
      <li class="m"> <a href="brend/masstige" class="nav-link">MASSTIGE</a> </li>
      <li class="p"> <a href="brend/perfecta" class="nav-link">PERFECTA</a> </li>
      <li class="s"> <a href="brend/spasta" class="nav-link">SPASTA</a> </li>
      <li class="s"> <a href="brend/start-epil" class="nav-link">START EPIL</a> </li>
      <li class="к"> <a href="brend/kafe-krasoty" class="nav-link">КАФЕ КРАСОТЫ</a> </li>
  </ul>
</div>

Редактор кода: https://liveweave.com/3tEnW8

Спасибо, с уважением


Источник

Ответы (2 шт):

Автор решения: Максим Н Епихин

Одно из самых простых решений на основе вашего кода:

  $(function(){
    let oldClass = '';

    $('ul#recipes li').each(function(index, element) {
      let liClass = $(this).attr('class');
      
      if (liClass !== oldClass) {
        $(this).prepend(`<h1>${liClass}</h1>`);
      }
      
      oldClass = liClass;
    })
  })

Мы просто учитываем предыдущий класс и текущий. Можно было бы сделать и методами группировки и поиском первого вхождения в группу, но это решение будет сложнее.

→ Ссылка
Автор решения: Алексей Шиманский 

$(function() {
    let prevLiLetter = '';
    
    $('ul#recipes li').each(function(index, element) {
        let liLetter = $(this).attr('class');

        if (liLetter !== prevLiLetter) {
            $(this).prepend(`<li><h4>${liLetter}</h4></li>`);
            prevLiLetter = liLetter;
        }
    })
})
.assortment ul {
  display: block;
}

.assortment ul li {
  line-height: 1;
}

.assortment ul li a {
  padding: 0 0;
  margin: .16rem 0;
  line-height: 1;
  display: inline-block;
  font-size: 14px;
  color: black;
}

.assortment ul li a:hover {
  color: #E5097F;
}

@media (max-width: 579px) {
  .assortment ul li a {
    line-height: 1.3;
  }
}
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="https://getbootstrap.com/dist/js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

<div class="assortment">
  <ul class="nav flex-column" id="recipes">
    <li class="7"> <a href="brend/7days" class="nav-link">7DAYS</a> </li>
    <li class="a"> <a href="brend/aevit-by-librederm" class="nav-link">AEVIT BY LIBREDERM</a> </li>
    <li class="a"> <a href="brend/alan-hadash" class="nav-link">Alan Hadash</a> </li>
    <li class="a"> <a href="brend/alan-hadash-2" class="nav-link">ALAN HADASH</a> </li>
    <li class="a"> <a href="brend/amberica" class="nav-link">AMBERICA</a> </li>
    <li class="a"> <a href="brend/aravia-2" class="nav-link">ARAVIA</a> </li>
    <li class="b"> <a href="brend/belkosmex" class="nav-link">BELKOSMEX</a> </li>
    <li class="b"> <a href="brend/bella" class="nav-link">BELLA</a> </li>
    <li class="b"> <a href="brend/bes" class="nav-link">BES</a> </li>
    <li class="b"> <a href="brend/botavikos" class="nav-link">BOTAVIKOS</a> </li>
    <li class="c"> <a href="brend/cafe-cafe" class="nav-link">CAFE CAFE</a> </li>
    <li class="c"> <a href="brend/cafe-mimi" class="nav-link">CAFE MIMI</a> </li>
    <li class="d"> <a href="brend/deonat" class="nav-link">DEONAT</a> </li>
    <li class="d"> <a href="brend/deonica" class="nav-link">DEONICA</a> </li>
    <li class="d"> <a href="brend/depiltouch" class="nav-link">Depiltouch</a> </li>
    <li class="d"> <a href="brend/dnc" class="nav-link">DNC</a> </li>
    <li class="e"> <a href="brend/eco-laboratorie-2" class="nav-link">ECO LABORATORIE</a> </li>
    <li class="e"> <a href="brend/ekel" class="nav-link">EKEL</a> </li>
    <li class="e"> <a href="brend/epica" class="nav-link">EPICA</a> </li>
    <li class="e"> <a href="brend/estel" class="nav-link">ESTEL</a> </li>
    <li class="f"> <a href="brend/fabrik-cosmetology" class="nav-link">Fabrik Cosmetology</a> </li>
    <li class="f"> <a href="brend/fabrik-cosmetology-2" class="nav-link">FABRIK COSMETOLOGY</a> </li>
    <li class="g"> <a href="brend/greenini" class="nav-link">GREENINI</a> </li>
    <li class="h"> <a href="brend/hadalabo" class="nav-link">HADALABO</a> </li>
    <li class="j"> <a href="brend/jeanmishel" class="nav-link">JEANMISHEL</a> </li>
    <li class="k"> <a href="brend/kapous" class="nav-link">KAPOUS</a> </li>
    <li class="l"> <a href="brend/lamel" class="nav-link">LAMEL</a> </li>
    <li class="l"> <a href="brend/liv-delano" class="nav-link">LIV DELANO</a> </li>
    <li class="l"> <a href="brend/luxvisage" class="nav-link">LUXVISAGE</a> </li>
    <li class="m"> <a href="brend/masstige" class="nav-link">MASSTIGE</a> </li>
    <li class="p"> <a href="brend/perfecta" class="nav-link">PERFECTA</a> </li>
    <li class="s"> <a href="brend/spasta" class="nav-link">SPASTA</a> </li>
    <li class="s"> <a href="brend/start-epil" class="nav-link">START EPIL</a> </li>
    <li class="к"> <a href="brend/kafe-krasoty" class="nav-link">КАФЕ КРАСОТЫ</a> </li>
  </ul>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.