Javascript/Jquery get child element, substract string and substitute

Question

I looked a lot, but I couldn't find a solution to my problem :c I'm not a JS expert, but this might be an easy one for programmers.

I have a list, a nav list:

<ul id="menu-navbar">
   <li id="menu-item-270-en" class="lang-item">
     <a href="site.com/en">
       English
     </a>
   </li>
   <li id="menu-item-270-pt" class="lang-item">
     <a href="site.com/">
       Português
     </a>
   </li>
</ul>

Two things: I need to get the text (English) from <a> inside the <li>, subtract and return only the first 2 letters. I want the site to show En. For the Português text, I want it to show Pt instead. A replace(); function should do, shouldn't it?

Can't insert neither id nor class into <a>, because it's generated by a plugin in Wordpress.

For the full code, the site is http://yogmel.com and the list on the upper right, on the navigation bar.

Note: The English site is not fully functional yet.

Thank you so much!

Answer 1

For you requirement, its better to maintain a mapping object instead.

jQuery

var langListMap = [{
  text: "English",
  shortName: "En"
}, {
  text: "Português",
  shortName: "Pt"
}]

$(document).ready(function(){
  $.each($("a"), function(i,a){
    var sName = getObject($(a).text());
    if(sName){
      $(a).text(sName.shortName);
    }
  });
})

function getObject(text){
  console.log(text)
  return langListMap.filter(function(a){
    return a.text === text.trim();
  })[0]
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<ul id="menu-navbar">
  <li id="menu-item-270-en" class="lang-item">
    <a href="site.com/en">
       English
     </a>
  </li>
  <li id="menu-item-270-pt" class="lang-item">
    <a href="site.com/">
       Português
     </a>
  </li>
  <li id="menu-item-270-pt" class="lang-item">
    <a href="site.com/">
       Test
     </a>
  </li>
</ul>

Pure JS

var langListMap = [{
  text: "English",
  shortName: "En"
}, {
  text: "Português",
  shortName: "Pt"
}]

function getObject(text) {
  return langListMap.filter(function(a) {
    return a.text === text.trim();
  })[0]
}

(function() {
  var a = document.getElementsByTagName("a");
  for (var i = 0; i < a.length; i++) {
    var sName = getObject(a[i].innerHTML);
    if (sName) {
      a[i].innerHTML = sName.shortName;
    }
  }
})();

<ul id="menu-navbar">
  <li id="menu-item-270-en" class="lang-item">
    <a href="site.com/en">
       English
     </a>
  </li>
  <li id="menu-item-270-pt" class="lang-item">
    <a href="site.com/">
       Português
     </a>
  </li>
  <li id="menu-item-270-pt" class="lang-item">
    <a href="site.com/">
       Test
     </a>
  </li>
</ul>