如何将数组中的html元素与每个循环中的html元素匹配

Question

我正在尝试遍历某个类的li元素，并查看它们是否存在于父元素数组中。 这些构成带有子菜单的菜单，而子菜单可能还有其他子菜单。

我可以对单击的元素执行此操作，这会触发事件，但需要帮助将每个迭代的元素与数组中的元素进行匹配。

我已经在“编辑”中添加了HTML。

$('.dropdown-submenu a.HasDropDown').on("click", function(e) {
  var current = $(this);
  var Parents = $(this).parents();
  var i = 0;

  $(this).parent().next('ul').toggle();
  e.stopPropagation();
  e.preventDefault();

  $('.dropdown-submenu a.clicked').each(function() {
    // Omit the clicked on element and it's parent menu and the next parent menu etc, closing & setting only the others
    for (var i = 0; i < Parents.length; i++) {
      if ($(this).text() == $(Parents[i]).text()) {
        alert("parent found");
      }
    }
    if ($(current).text() == $(this).text() || $(this) == Parents[i]) {
      alert(" Same");
    } else {
      // Hide all these other menus
      //$(current).parent().next().slideToggle(200);
    }
    i++;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-collapse collapse navbar-left">
  <ul class="nav navbar-nav">
    <li class="dropdown-menu show" style="color: gainsboro; display: inline-block; background-color: rgb(34, 34, 34);">
      <a class="dropdown-toggle" aria-expanded="true" style="color: gainsboro; background-color: rgb(34, 34, 34) !important;" href="#" data-toggle="dropdown">

        <span class="glyphicon glyphicon-circle-arrow-up"></span> Menu
      </a>
      <ul class="dropdown-menu show" style="background: rgb(34, 34, 34) !important; width: 20%;">
        <li class="dropdown-submenu">
          <span>
						<a class="HasDropDown dropdown-toggle clicked" style="color: gainsboro; background-color: rgb(34, 34, 34) !important;" href="#">
							<span class="glyphicon glyphicon-circle-arrow-up"></span> Administration
          </a>
          </span>
          <ul class="dropdown-menu" style="display: block;">
            <li class="dropdown-submenu">
              <span>
								<a class="HasDropDown dropdown-toggle" style="color: gainsboro; background-color: rgb(34, 34, 34) !important;" href="#">
									<span class="glyphicon glyphicon-circle-arrow-down"></span> Lookup Tables
              </a>
              </span>
              <ul class="dropdown-menu" style="display: block;">
                <li class="dropdown-submenu">
                  <a style="color: gainsboro; background-color: rgb(34, 34, 34) !important;" href="/Country/List">
										Countries
									</a>
                </li>
                <li class="dropdown-submenu">
                  <a style="color: gainsboro; background-color: rgb(34, 34, 34) !important;" href="/City/List">
										Cities
									</a>
                </li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <span>
								<a class="HasDropDown dropdown-toggle" style="color: gainsboro; background-color: rgb(34, 34, 34) !important;" href="#">
									<span class="glyphicon glyphicon-circle-arrow-down"></span> Security
              </a>
              </span>
              <ul class="dropdown-menu">
                <li class="dropdown-submenu">
                  <a style="color: gainsboro; background-color: rgb(34, 34, 34) !important;" href="/IdentityComponent">
										Users
									</a>
                </li>
                <li class="dropdown-submenu">
                  <a style="color: gainsboro; background-color: rgb(34, 34, 34) !important;" href="/identitycomponentpermission">
										Roles
									</a>
                </li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <span>
								<a class="HasDropDown dropdown-toggle" style="color: gainsboro; background-color: rgb(34, 34, 34) !important;" href="#">
									<span class="glyphicon glyphicon-circle-arrow-down"></span> Debtors
              </a>
              </span>
              <ul class="dropdown-menu">
                <li class="dropdown-submenu">
                  <a style="color: gainsboro; background-color: rgb(34, 34, 34) !important;" href="/Debtor/List">
										Debtors
									</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
</div>