Найти дубликаты по классам и удалить

<ul class="list">
    <li class="item_20"></li>
    <li class="item_20"></li>
    <li class="item_20"></li>
    <li class="item_21"></li>
    <li class="item_21"></li>
    <li class="item_22"></li>
    <li class="item_22"></li>
</ul>

Есть ли способ с jQuery определить и удалить дубликаты класса BY в приведенном выше примере? Таким образом, только один li остается единственным уникальным классом.

-2
источник поделиться
5 ответов

Этот код ниже должен работать для вашей проблемы

var elem = {};
$('ul.list li').each(function() {
   var txt = $(this).attr('class');
   if (elem[txt])
       $(this).remove();
   else
       elem[txt] = true;
});

Вы можете найти объяснения здесь: qaru.site/questions/145581/...

Здесь скрипка с демо- версией: JSfiddle

0
источник

Используйте этот JQuery:

$(document).ready(function(e) {
    var className = '';
    $('.list li').each(function(index, element) {
        if($(this).attr('class') != className){
            className = $(this).attr('class');
        }else{
            $(this).remove();
        }
    });
});

HTML

<ul class="list">
    <li class="item_20">a</li>
    <li class="item_20">b</li>
    <li class="item_20">c</li>
    <li class="item_21">d</li>
    <li class="item_21">e</li>
    <li class="item_22">f</li>
    <li class="item_22">g</li>
</ul>

То, что я сделал, - это проверка класса каждого li, и если он совпадает с тем же именем, тогда он удалит это li.

Проверить скрипку

+1
источник

Вы можете попробовать ниже, я предположил, что каждый элемент li содержит только один класс.

$('.list li').each(function() {
  var
    $this = $(this),
    cls = '.' + $this.attr('class');

  $(cls).nextAll(cls).remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li class="item_20">item_20</li>
  <li class="item_20">item_20</li>
  <li class="item_20">item_20</li>
  <li class="item_21">item_21</li>
  <li class="item_21">item_21</li>
  <li class="item_22">item_22</li>
  <li class="item_22">item_22</li>
</ul>
+1
источник

увидел это на другой теме

(function($) {
  'use strict';
  
  $.fn.removeDuplicates = function() {
    var $original = $([]);
    
    this.each(function(i, el) {
      var $el = $(el),
          isDuplicate;
      
      $original.each(function(i, orig) {
        if (el.isEqualNode(orig)) {
          isDuplicate = true;
          $el.remove();
        }
      });
      
      if (!isDuplicate) {
        $original = $original.add($el);
      }
    });
    
    return $original;
  };
  
}(jQuery));

$('.test').removeDuplicates();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="test className">content</div>
  <div class="test className">content</div>
  <div class="test className">content</div>
  <div class="test className">content</div>
</body>
</html>
+1
источник

Вы можете использовать filter() для фильтрации дубликата li и удаления их с помощью remove()

$('ul.list li').filter(function(i) {
  // check element is not first element based on index
  return i != $('ul.list .' + this.className).index()
}).remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list">
  <li class="item_20"></li>
  <li class="item_20"></li>
  <li class="item_20"></li>
  <li class="item_21"></li>
  <li class="item_21"></li>
  <li class="item_22"></li>
  <li class="item_22"></li>
</ul>
+1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос