JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navi">
  <ul>
  <li class="menu-item-has-children"><a>テスト</a></li>
    <li><a href="https://wp-simplicity.com/">hrefがある場合は変わらないかチェック</a>
      <ul>
        <li><a>ネストした中身も変わるかチェック</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS

#navi .menu-item-has-children p {
    color: #fff;
    display: inline-block;
    margin: 0;
    padding: .5em 1.8em;
    box-sizing: border-box;
}
#navi .menu-item-has-children p:hover {
  background-color: #333;
}

JavaScript

(function($) {
  $(function() {

    var checkA = $("#navi li").find("a");
		
    //checkAの各aを調べて
    checkA.each(function() {
      var checkAhref = $(this).attr("href"),
      text = $(this).text();
      
      //aタグがhrefをもっていない場合
      if (checkAhref === undefined) {
        $(this).html("<p>"+text+"</p>"); //ここでクラス変更
        $("p",this).unwrap("a");
      }
    });

  });
})(jQuery);