文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >删除ul列表中重复的li

问删除ul列表中重复的li
EN

Stack Overflow用户
提问于 2017-11-27 17:30:35
回答 3查看 1.1K关注 0票数 0

我有一个ul列表，其中动态显示一个文件中的几个li。其中一些似乎有相同的标签，所以我想删除它们，只留下其中的一个：

我有这个：

代码语言：javascript
复制
    <ul id="dealers-ul" data-next="#branches-ul">
<li class="select-option"><input type="radio" name="choice" id="344410" value="Barcelona Premium"><label for=" 344410 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="343594" value="Barcelona Premium"><label for=" 343594 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="343584" value="Barcelona Premium"><label for=" 343584 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="344444" value="Barcelona Premium"><label for=" 344444 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="343882" value="Ibericar Cadí"><label for=" 343882 "> Ibericar Cadí</label></li>
<li class="select-option"><input type="radio" name="choice" id="343640" value="Ibericar Cadí"><label for=" 343640 "> Ibericar Cadí</label></li>
<li class="select-option"><input type="radio" name="choice" id="343856" value="Motor Munich"><label for=" 343856 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="343831" value="Motor Munich"><label for=" 343831 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="344363" value="Motor Munich"><label for=" 344363 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="343902" value="Motor Munich"><label for=" 343902 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="344450" value="Nürburgring"><label for=" 344450 "> Nürburgring</label></li>
<li class="select-option"><input type="radio" name="choice" id="344421" value="Pruna Motor"><label for=" 344421 "> Pruna Motor</label></li>
<li class="select-option"><input type="radio" name="choice" id="343628" value="Pruna Motor"><label for=" 343628 "> Pruna Motor</label></li>
<li class="select-option"><input type="radio" name="choice" id="343647" value="Sitjas"><label for=" 343647 "> Sitjas</label></li>
<li class="select-option"><input type="radio" name="choice" id="343892" value="Tallcar"><label for=" 343892 "> Tallcar</label></li>
</ul>

我只想要一份巴塞罗那高级，一份伊比里卡·卡迪，一份慕尼黑赛车，一份普鲁纳……

jquery
html
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-11-27 17:39:52

​

代码语言：javascript
复制
var listForRemove = [];
var listOfUniqe = [];
$('#dealers-ul li').each(function () {

  var text = $(this).text().trim();

  if (listOfUniqe.indexOf(text) === -1)
    listOfUniqe.push(text);
  else
    listForRemove.push($(this));
});

$(listForRemove).each(function () { $(this).remove(); });
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="dealers-ul" data-next="#branches-ul">
<li class="select-option"><input type="radio" name="choice" id="344410" value="Barcelona Premium"><label for=" 344410 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="343594" value="Barcelona Premium"><label for=" 343594 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="343584" value="Barcelona Premium"><label for=" 343584 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="344444" value="Barcelona Premium"><label for=" 344444 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="343882" value="Ibericar Cadí"><label for=" 343882 "> Ibericar Cadí</label></li>
<li class="select-option"><input type="radio" name="choice" id="343640" value="Ibericar Cadí"><label for=" 343640 "> Ibericar Cadí</label></li>
<li class="select-option"><input type="radio" name="choice" id="343856" value="Motor Munich"><label for=" 343856 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="343831" value="Motor Munich"><label for=" 343831 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="344363" value="Motor Munich"><label for=" 344363 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="343902" value="Motor Munich"><label for=" 343902 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="344450" value="Nürburgring"><label for=" 344450 "> Nürburgring</label></li>
<li class="select-option"><input type="radio" name="choice" id="344421" value="Pruna Motor"><label for=" 344421 "> Pruna Motor</label></li>
<li class="select-option"><input type="radio" name="choice" id="343628" value="Pruna Motor"><label for=" 343628 "> Pruna Motor</label></li>
<li class="select-option"><input type="radio" name="choice" id="343647" value="Sitjas"><label for=" 343647 "> Sitjas</label></li>
<li class="select-option"><input type="radio" name="choice" id="343892" value="Tallcar"><label for=" 343892 "> Tallcar</label></li>
</ul>

​

这应该可以完成以下工作:)

票数 1
EN

Stack Overflow用户

发布于 2017-11-27 17:40:36

希望这对你有帮助

​

代码语言：javascript
复制
  uniqueLi = {};

$("#dealers-ul li").each(function () {
  var thisVal = $(this).text();

  if ( !(thisVal in uniqueLi) ) {
    uniqueLi[thisVal] = "";
  } else {
    $(this).remove();
  }
})
console.log(uniqueLi);
代码语言：javascript
复制
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="dealers-ul" data-next="#branches-ul">
<li class="select-option"><input type="radio" name="choice" id="344410" value="Barcelona Premium"><label for=" 344410 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="343594" value="Barcelona Premium"><label for=" 343594 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="343584" value="Barcelona Premium"><label for=" 343584 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="344444" value="Barcelona Premium"><label for=" 344444 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="343882" value="Ibericar Cadí"><label for=" 343882 "> Ibericar Cadí</label></li>
<li class="select-option"><input type="radio" name="choice" id="343640" value="Ibericar Cadí"><label for=" 343640 "> Ibericar Cadí</label></li>
<li class="select-option"><input type="radio" name="choice" id="343856" value="Motor Munich"><label for=" 343856 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="343831" value="Motor Munich"><label for=" 343831 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="344363" value="Motor Munich"><label for=" 344363 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="343902" value="Motor Munich"><label for=" 343902 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="344450" value="Nürburgring"><label for=" 344450 "> Nürburgring</label></li>
<li class="select-option"><input type="radio" name="choice" id="344421" value="Pruna Motor"><label for=" 344421 "> Pruna Motor</label></li>
<li class="select-option"><input type="radio" name="choice" id="343628" value="Pruna Motor"><label for=" 343628 "> Pruna Motor</label></li>
<li class="select-option"><input type="radio" name="choice" id="343647" value="Sitjas"><label for=" 343647 "> Sitjas</label></li>
<li class="select-option"><input type="radio" name="choice" id="343892" value="Tallcar"><label for=" 343892 "> Tallcar</label></li>
</ul>

​

票数 2
EN

Stack Overflow用户

发布于 2017-11-27 17:36:05

最好不要一开始就添加重复的项目。此代码将删除重复的项。

​

代码语言：javascript
复制
var liText = '',
  liList = $('#dealers-ul li'),
  listForRemove = [];

$(liList).each(function() {

  var text = $(this).text();

  if (liText.indexOf('|' + text + '|') == -1)
    liText += '|' + text + '|';
  else
    listForRemove.push($(this));

});

$(listForRemove).each(function() {
  $(this).remove();
});
代码语言：javascript
复制
<ul id="dealers-ul" data-next="#branches-ul">
  <li class="select-option">
    <input type="radio" name="choice" id="344410" value="Barcelona Premium">
    <label for=" 344410 "> Barcelona Premium</label>
  </li>
  <li class="select-option">
    <input type="radio" name="choice" id="343594" value="Barcelona Premium">
    <label for=" 343594 "> Barcelona Premium</label>
  </li>
  <li class="select-option">
    <input type="radio" name="choice" id="343584" value="Barcelona Premium">
    <label for=" 343584 "> Barcelona Premium</label>
  </li>
  <li class="select-option">
    <input type="radio" name="choice" id="344444" value="Barcelona Premium">
    <label for=" 344444 "> Barcelona Premium</label>
  </li>
  <li class="select-option">
    <input type="radio" name="choice" id="343882" value="Ibericar Cadí">
    <label for=" 343882 "> Ibericar Cadí</label>
  </li>
  <li class="select-option">
    <input type="radio" name="choice" id="343640" value="Ibericar Cadí">
    <label for=" 343640 "> Ibericar Cadí</label>
  </li>
  <li class="select-option">
    <input type="radio" name="choice" id="343856" value="Motor Munich">
    <label for=" 343856 "> Motor Munich</label>
  </li>
  <li class="select-option">
    <input type="radio" name="choice" id="343831" value="Motor Munich">
    <label for=" 343831 "> Motor Munich</label>
  </li>
  <li class="select-option">
    <input type="radio" name="choice" id="344363" value="Motor Munich">
    <label for=" 344363 "> Motor Munich</label>
  </li>
  <li class="select-option">
    <input type="radio" name="choice" id="343902" value="Motor Munich">
    <label for=" 343902 "> Motor Munich</label>
  </li>
  <li class="select-option">
    <input type="radio" name="choice" id="344450" value="Nürburgring">
    <label for=" 344450 "> Nürburgring</label>
  </li>
  <li class="select-option">
    <input type="radio" name="choice" id="344421" value="Pruna Motor">
    <label for=" 344421 "> Pruna Motor</label>
  </li>
  <li class="select-option">
    <input type="radio" name="choice" id="343628" value="Pruna Motor">
    <label for=" 343628 "> Pruna Motor</label>
  </li>
  <li class="select-option">
    <input type="radio" name="choice" id="343647" value="Sitjas">
    <label for=" 343647 "> Sitjas</label>
  </li>
  <li class="select-option">
    <input type="radio" name="choice" id="343892" value="Tallcar">
    <label for=" 343892 "> Tallcar</label>
  </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

​

来源：jquery remove duplicate li

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/47507625

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档