user2406735 user2406735 - 11 months ago 41
Javascript Question

Get first letter for first of multiple surnames in list starting with that letter

I have a list of employees for which i have to get the first letter, for the first surname that starts with that letter and add it as data.

<ul class="org-list" >
<li class="org-list-item">
<span class="surname">AA</span> <span class="name">John</span>
</li>
<li class="org-list-item">
<span class="surname">AB</span> <span class="name">John</span>
</li>
<li class="org-list-item">
<span class="surname">AC</span> <span class="name">John</span>
</li>
<li class="org-list-item">
<span class="surname">BA</span> <span class="name">John</span>
</li>
<li class="org-list-item">
<span class="surname">BB</span> <span class="name">John</span>
</li>
<li class="org-list-item">
<span class="surname">CA</span> <span class="name">John</span>
</li>
<li class="org-list-item">
<span class="surname">CB</span> <span class="name">John</span>
</li>
<li class="org-list-item">
<span class="surname">CC</span> <span class="name">John</span>
</li>
</ul>


From this list
<li>
items that have surnames AA, BA, CA should have a data attribute
data-surname="A"
or
data-surname="B"
,
data-surname="C"


How can i extract those letters and add them as data?

I literally don't know how to start it so i don't have any code to post. Thank you for help.

Answer Source

You can either do it by using jQuery Data Method, which is not visible to DOM browser, or just add a data-surname attribute.

E.g.

$(function() {
  var assignedSurname = [];
  $('.org-list-item > .surname').each(function(i, elem) {
    var $elem = $(elem);
    var surnameInitial = $elem.text()[0];
    if (assignedSurname.indexOf(surnameInitial) === -1) {
      var $liParent = $elem.parent('li');
      $liParent.attr('data-surname', surnameInitial);

      assignedSurname.push(surnameInitial);

      // Or as jquery data attribute, which is not visible to DOM browser.
      //$liParent.data('surname', surnameInitial);
    }
  });
  
  $('li.org-list-item[data-surname]').each(function(i, elem) {
     console.log($(elem).attr('data-surname'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="org-list">
  <li class="org-list-item">
    <span class="surname">AA</span>  <span class="name">John</span>
  </li>
  <li class="org-list-item">
    <span class="surname">AB</span>  <span class="name">John</span>
  </li>
  <li class="org-list-item">
    <span class="surname">AC</span>  <span class="name">John</span>
  </li>
  <li class="org-list-item">
    <span class="surname">BA</span>  <span class="name">John</span>
  </li>
  <li class="org-list-item">
    <span class="surname">BB</span>  <span class="name">John</span>
  </li>
  <li class="org-list-item">
    <span class="surname">CA</span>  <span class="name">John</span>
  </li>
  <li class="org-list-item">
    <span class="surname">CB</span>  <span class="name">John</span>
  </li>
  <li class="org-list-item">
    <span class="surname">CC</span>  <span class="name">John</span>
  </li>
</ul>

And if you opt to use jQuery Data Attribute, You can access the value of the DOM by,

$('li.org-list-item[data-surname]').each(function (i, elem){
 console.log($(elem).data('surname'));
});