2016-04-20 3 views
-2
<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 остается единственным уникальным классом.Найти дубликаты по классам и удалить

+0

взгляд на селекторе класса –

ответ

0

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

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

Вы можете узнать объяснения здесь: https://stackoverflow.com/a/2822974/4673732

Вот скрипку с демо: JSfiddle

1

Используйте эту 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> 

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

Проверить fiddle

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>

Смежные вопросы