CODEWITHSUNDEEP
javascriptjquery
user2406735
user2406735

Reputation: 245

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.

Upvotes: 0

Views: 248

Answers (2)

Brian Peacock
Brian Peacock

Reputation: 1849

Here's a quick function which will help you.

var selector = 'ul.org-list-item li span.surname'
Array.prototype.slice.call(
    document.querySelectorAll(selector)
).forEach(function(item) {
    var firstLetter = item.textContent.slice(0,1);
    item.parentElement.setAttribute('data-surname',firstLetter);
});

Info:

Upvotes: 0

choz
choz

Reputation: 17868

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

Upvotes: 1

Related Questions