user2406735 user2406735 - 3 months ago 8
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

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