如何隐藏 <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>

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

有没有办法让它只显示唯一值？

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。它 作为一个包含所有先前看到的文本的集合。线如果 (seen[txt]) 检查文本是否在集合中。如果是这样，我们已经看到 这段文字之前，所以我们删除链接。否则，这是一个链接 我们第一次看到的文字。我们将它添加到集合中，以便任何 具有相同文本的其他链接将被删除。

表示集合的另一种方法是使用包含 所有的价值观。然而，这会使它慢得多，因为看看是否 value 在数组中，我们每次都需要扫描整个数组。 使用 seen[txt] 在对象中查找键非常快 比较。