javascript - 如果页面上不存在 div，JQuery ui 选项卡会删除/隐藏 中的

Question

代码:

<div id="alert-view-tabs">
            <ul>
                <li><a href="#general-tab-alert-view">General information</a></li>
                <li><a href="#alert-sections-view">Alert Items</a></li>
                <li><a href="#alert-operators-view">Operators</a></li>
                <li><a href="#AlertPlanTypeAudienceView">Plan Type & Audience</a></li>
                <li><a href="#AlertDiscountOffersView">Discount Offers</a></li>
                <li><a href="#AlertStandartPlanView">Standard Plans</a></li>
                <li><a href="#AlertDataOnlyPlanView">Data Only Plans</a></li>
                <li><a href="#InternationalRatesAlertView">International Rates</a></li>
                <li><a href="#RoamingRatesAlertView">Roaming Rates</a></li>
            </ul>

在某些情况下，我的页面中没有 divs，您可以在上面看到。所以选择器是空的，但如果页面中不存在 div，我需要删除或隐藏选项卡。我是 JS 的新手，很乐意得到任何帮助。

Answer 1

这里是基本思想和解释。

//So select all of the anchors
var anchors = $("#alert-view-tabs a");
//loop them
anchors.each(function() {
  //get the hash
  var id = this.hash
  //see if it exists
  var isThere = $(id).length === 1;
  //if not, remove the parent
  if (!isThere) {
      $(this).closest("li").remove();  
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alert-view-tabs">
  <ul>
    <li><a href="#general-tab-alert-view">General information</a></li>
    <li><a href="#alert-sections-view">Alert Items</a></li>
    <li><a href="#alert-operators-view">Operators</a></li>
    <li><a href="#AlertPlanTypeAudienceView">Plan Type &amp; Audience</a></li>
    <li><a href="#AlertDiscountOffersView">Discount Offers</a></li>
    <li><a href="#AlertStandartPlanView">Standard Plans</a></li>
    <li><a href="#AlertDataOnlyPlanView">Data Only Plans</a></li>
    <li><a href="#InternationalRatesAlertView">International Rates</a></li>
    <li><a href="#RoamingRatesAlertView">Roaming Rates</a></li>
  </ul>
</div>
<div id="general-tab-alert-view">general-tab-alert-view</div>
<div id="alert-operators-view">alert-operators-view</div>