Как добавить уникальный идентификатор в первый в своем роде - PullRequest
Новая
       54

Как добавить уникальный идентификатор в первый в своем роде

0 голосов
/ 01 июня 2019

ки.Создание каталога сотрудников.В верхней части каталога находится алфавит, поэтому вы можете нажать на букву, чтобы прийти к первому человеку, у которого эта буква является первой буквой фамилии.Как я могу перебрать всех сотрудников и добавить идентификатор письма к каждому из них.Я еще не создал разметку, но сейчас она может быть такой простой, как 

<h3><span class="fname">Johnny</span><span class="lname">Willis</span></h3>
</div> ```

Where I would target the last name and add an ID to the card
I am pulling all of the content in from a hubspot hubdb.  Unsure if that is relevant, but wanted to add that.

1 Ответ

0 голосов
/ 01 июня 2019

Я думаю, вам не нужно добавлять идентификатор для каждой из фамилий в вашем списке. Если вы просто хотите прокрутить вниз до первого элемента при нажатии на алфавитный указатель, попробуйте следующее:

HTML 

<!-- A container for the alphabet letters -->
<div id="alphabet">
  <span id="letter-a">A</span>
  <span id="letter-b">B</span>
  <span id="letter-c">C</span>
  <span id="letter-d">D</span>
</div>

<!-- A container for each last name -->
<div id="employee-a" style="height:500px">
  <p>A</p>
  <p>Adams Mike</p>
  <p>Addison John</p>
  <p>Adkins Smith</p>
</div>
<div id="employee-b" style="height:500px">
  <p>B</p>
  <p>Bain Chris</p>
  <p>Barker Travis</p>
  <p>Banner Brock</p>
</div>
<div id="employee-c" style="height:500px">
  <p>C</p>
  <p>Carl Steve</p>
  <p>Carter Aaron</p>
  <p>Castle Vania</p>
</div>
<div id="employee-d" style="height:500px">
  <p>D</p>
  <p>Daenerys Targaryen</p>
  <p>Dale Denton</p>
  <p>Daniels Jack</p>
</div>

JAVASCRIPT 

<script>
  // Wait until DOM is fully loaded
  $(document).ready(function() {
    // Get the ID name from the letter you clicked
    $('#alphabet > span').on('click', function() {
      // Pass this ID name to a variable
      var letter = $(this).attr('id');
      var goTo = letter.split('-').pop();
      // Use it to smooth scroll to the position of the first last name with the letter you clicked
      $('html, body').animate({
        scrollTop : $('#employee-' + goTo).offset().top
      }, 500);
    })
  });
</script>

Надеюсь, это поможет.

Наслаждайтесь!

...