So entfernen Sie mithilfe von Javascript-HTML nur doppelte UL-Elemente für jedes LI-Element

Question

Ich zeige eine dynamisch generierte Navigationsstruktur an. Jeder Standort verfügt über einen Filialtyp, der aus den Filialen dieses Standorts generiert wird.

Ich muss Duplikate für jeden Standort entfernen, damit Lebensmittel an beiden Standorten angezeigt werden können. Ich habe die unten stehende allgemeine JQuery-Lösung ausprobiert, die Duplikate entfernt, aber dazu führt, dass jeder Geschäftstyp nur an einer Stelle angezeigt wird.

var seen = {};
$("ul#storetypes").find("li").each(function(index, html_obj) {
  txt = $(this).text().toLowerCase();

  if (seen[txt]) {
    $(this).remove();
  } else {
    seen[txt] = true;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li>Location 1
    <ul id="storetypes" class="sub-menu">
      <li>groceries</li>
      <li>cakes</li>
      <li>motor spares</li>
      <li>groceries</li>
    </ul>
  </li>
  <li>Location 2
    <ul class="sub-menu">
      <li>groceries</li>
      <li>motor spares</li>
      <li>motor spares</li>
      <li>groceries</li>
    </ul>
  </li>
</ul>

Answer 1

你可以这样做：

$("ul.sub-menu li").each(function(index, html_obj) {
  if ($(this).prevAll(":contains(" + $(this).text() + ")").length > 0) {
    $(this).remove();
  }
});

这将查看每个 .sub-menu 并查看是否存在具有相同文本的“li”，并删除重复的内容。

演示

$("ul.sub-menu li").each(function(index, html_obj) {
  if ($(this).prevAll(":contains(" + $(this).text() + ")").length > 0) {
    $(this).remove();
  }
});

  
Location 1
    

      
groceries
      
cakes
      
motor spares
      
groceries
    
  
  
Location 2
    

      
groceries
      
motor spares
      
motor spares
      
groceries