如何在<li>中隐藏冗余元素

Question

我有以下清单：

​

<ul>
  <li>
    <input name="tablefilter" type="checkbox" value="Finspång" id="tablefilter1" checked="">Finspång
  </li>
  <li>
    <input name="tablefilter" type="checkbox" value="Linköping" id="tablefilter1" checked="">Linköping
  </li>
  <li>
    <input name="tablefilter" type="checkbox" value="Linköping" id="tablefilter1" checked="">Linköping
  </li>
</ul>

​

如您所见，我有两个名为“Link ping”的<li>。

是否有任何方法使它只显示唯一的值？

Answer 1

只需从源代码中删除它。所以你会有：

<ul>
    <li>
        <input name="tablefilter" type="checkbox" value="Finspång" id="tablefilter1" checked="">Finspång
    </li>
    <li>
        <input name="tablefilter" type="checkbox" value="Linköping" id="tablefilter1" checked="">Linköping
    </li>
</ul>

您还可以使用关键字hidden。

<ul>
    <li>
        <input name="tablefilter" type="checkbox" value="Finspång" id="tablefilter1" checked="">Finspång
    </li>
    <li>
        <input name="tablefilter" type="checkbox" value="Linköping" id="tablefilter1" checked="">Linköping
    </li>
    <li hidden >
        <input name="tablefilter" type="checkbox" value="Linköping" id="tablefilter1" checked="">Linköping
    </li>
</ul>

要在不向html代码中添加任何内容的情况下显示唯一的值，可以使用jquery。

https://jsfiddle.net/8sm6j9kk/

有关JQuery: Remove duplicate elements?的解释，请参阅本文

解释： seen是一个将以前看到的文本映射为true的对象。它作为一套包含所有以前看到的文本的集合。行if (seentxt)检查文本是否在集合中。如果是这样的话，我们以前看过这个文本，所以我们删除了链接。否则，这是我们第一次看到的链接文本。我们将其添加到集合中，以便删除与同一文本的任何进一步链接。 表示集合的另一种方法是使用包含所有值的数组。但是，这将使其速度慢得多，因为要查看数组中是否有值，我们每次都需要扫描整个数组。相对来说，使用seentxt查找对象中的键非常快。