按类查找重复项并删除

时间:2016-04-20 11:20:34

标签: jquery css

<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类?所以每个独特的班级只剩下一个李。

5 个答案:

答案 0 :(得分:2)

您可以尝试以下方法,我假设每个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 :(得分: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>

我所做的是检查每个li的类,如果它匹配同名,那么它将删除那个li。

检查http://schemas.datacontract.org/2004/07/ClassLibrary1Common:TestObject

答案 2 :(得分: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>

答案 3 :(得分: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>

答案 4 :(得分:0)

以下代码适用于您的问题

public Integer persistInsertImportRunForId(){
    String queryString = getSql("insertImportRunForId");
    KeyHolder holder = new GeneratedKeyHolder();
    jdbcTemplate.update(con -> {
            return con.prepareStatement(queryString, Statement.RETURN_GENERATED_KEYS);
        }, holder
    );

    return CommonUtils.tryOrGet(() -> holder.getKeys().get("id_import_run"), null);
}

您可以在此处找到解释:https://stackoverflow.com/a/2822974/4673732

这是一个演示小提琴:JSfiddle