如果重复<a> tag found

时间：2017-12-06 15:58:15

标签： javascript jquery html css

Removing <li> if duplicate <a> tag found (after trimming <a> for trailing space from url and text).

I am using seen but the duplicate is still showing. It looks like Dashboard is duplicating but the 2nd Dashboard has a trailing space in the link url and title.

var seen = {};
$('.nav-report-category a').each(function() {
  var txt = $(this).text();
  if (seen[txt]) $(this).closest("li").remove();
  else seen[txt] = true;
});
.nav-report-category {
  border: none !important;
}

.nav-report-category li {
  font-size: 16px;
  padding: 10px 0px;
  width: 110px;
  display: inline-block;
  background-color: rgb(74, 137, 220);
  color: #fff!important;
  margin-right: 5px;
  text-align: center;
  -moz-border-radius: 9px 9px 0px 0px;
  -webkit-border-radius: 9px 9px 0px 0px;
  border-radius: 9px 9px 0px 0px;
  font-color: #fff!important;
}

.nav-report-category li.active {
  background-color: #CB6015!important;
  color: #fff!important;
}

.nav-report-category li a:visited {
  color: #fff!important;
}

.nav-report-category li a {
  color: #fff!important;
}

.nav-report-category li:Hover {
  background-color: #BE3A34;
  text-decoration: none;
}

.tab-desc {
  background-color: rgb(93, 156, 236);
  color: #fff !important;
  padding: 5px;
}

.tab-desc H2 {
  color: #fff !important;
}

#txt-Business-Function {
  font-family: "Segoe UI Light", "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
  color: #BE3A34;
  font-size: 22px;
  font-weight: bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-report-category">
  <li><a href="https://myanalytix-beta.myexterran.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Inventory">Inventory</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Manufacturing">Manufacturing</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Metrics">Metrics</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Operational">Operational</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Planning">Planning</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Procurement">Procurement</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Sales Order">Sales Order</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Dashboard">Dashboard</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=International Operations">International Operations</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Purchasing">Purchasing</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Dashboard&nbsp;‎">Dashboard&nbsp;‎</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Strategic Sourcing">Strategic Sourcing</a></li>
</div>

2 个答案:

答案 0 :(得分：1)

<强> Working fiddle

主要问题来自您在锚点中使用文本的HTML实体，您必须在检索文本时删除/替换它们，您的第二个“仪表板”文本位于事实Dashboard&nbsp;&lrm;中，因此它永远不会与Dashboard key匹配。

从JS中删除它们或从HTML代码中删除它们，例如：

var txt = $(this).text().replace(/[^A-Z0-9]+/ig, "");

注1：在您的情况下，使用x.hasOwnProperty(y)检查对象x是否具有属性y：

if ( seen.hasOwnProperty( txt ) ){

注2：由于@ MasterYoda的评论说您的<li>元素应该是<ul>或<ol>而非<div>的子元素 

var seen = {};
$('.nav-report-category a').each(function() {
  var txt = $(this).text().replace(/[^A-Z0-9]+/ig, "");

  if (seen.hasOwnProperty(txt)) {
    $(this).closest("li").remove();
  } else {
    seen[txt] = true;
  }
});
.nav-report-category {
  border: none !important;
}

.nav-report-category li {
  font-size: 16px;
  padding: 10px 0px;
  width: 110px;
  display: inline-block;
  background-color: rgb(74, 137, 220);
  color: #fff!important;
  margin-right: 5px;
  text-align: center;
  -moz-border-radius: 9px 9px 0px 0px;
  -webkit-border-radius: 9px 9px 0px 0px;
  border-radius: 9px 9px 0px 0px;
  font-color: #fff!important;
}

.nav-report-category li.active {
  background-color: #CB6015!important;
  color: #fff!important;
}

.nav-report-category li a:visited {
  color: #fff!important;
}

.nav-report-category li a {
  color: #fff!important;
}

.nav-report-category li:Hover {
  background-color: #BE3A34;
  text-decoration: none;
}

.tab-desc {
  background-color: rgb(93, 156, 236);
  color: #fff !important;
  padding: 5px;
}

.tab-desc H2 {
  color: #fff !important;
}

#txt-Business-Function {
  font-family: "Segoe UI Light", "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
  color: #BE3A34;
  font-size: 22px;
  font-weight: bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav-report-category">
  <li><a href="https://myanalytix-beta.myexterran.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Inventory">Inventory</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Manufacturing">Manufacturing</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Metrics">Metrics</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Operational">Operational</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Planning">Planning</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Procurement">Procurement</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Sales Order">Sales Order</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Dashboard">Dashboard</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=International Operations">International Operations</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Purchasing">Purchasing</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Dashboard&nbsp;‎">Dashboard&nbsp;‎</a></li>
  <li><a href="https://analytix.my.com/Pages/AllReports.aspx?BF=Supply Chain&amp;RC=Strategic Sourcing">Strategic Sourcing</a></li>
</div>

答案 1 :(得分：0)

var seen = {};
$('.nav-report-category a').each(function() {

  var txt1 = decodeURI($(this).text());
  var txt = txt1.replace(/[^a-zA-Z ]/g, "");
  if (seen[txt]) $(this).closest("li").remove();
  else seen[txt] = true;
});
相关问题
最新问题