[Solved] Ampersand in innerHtml() not being read correctly and validating in JS

Question

.innerHTML isn’t a method. For jQuery, it’s $(this).html() or with the native API, it would be this.innerHTML.

And use more sensible flow control constructs like a switch statement.

Generally, .innerHTML comparison can be touchy. Use .text() instead when you’re only comparing the text content.

$("li.menu-item a.ui-link").each(function() {
    switch ($(this).text()) {
    case "Accounts":
        $(this).addClass("AccountIcon"); break;
    case "Transfers":
        $(this).addClass("TransferIcon"); break;
    case "Messages":
        $(this).addClass("MessageIcon"); break;
    case "Alerts & Settings":
         $(this).addClass("AlertSettingIcon"); break;
    case "Deposit a Check":
         $(this).addClass("RDCIcon"); break;
    default:
         $(this).addClass("AlertSettingIcon");
    }
});

Another way would be to have a map of the HTML to the class name…

var map = {
  Accounts: "AccountIcon",
  Transfers: "TransferIcon",
  Messages: "MessageIcon",
  "Alerts & Settings": "AlertSettingsIcon",
  "Deposit a Check": "RDCIcon"
}

Then it’s just…

$("li.menu-item a.ui-link").each(function() {
    $(this).addClass(map[$(this).text()] || "AlertSettingIcon");
});

Or even better…

$("li.menu-item a.ui-link").addClass(function() {
    return map[$(this).text()] || "AlertSettingIcon";
});

Accepted Answer