7

所以基本上我的 div 生成如下:

<div class="test className">content</div>
<div class="test className">content</div>
<div class="test className">content</div>
..
<div class="test className">content</div>

我正在尝试删除重复的 div 并只保留最后一个!有什么快速的想法吗?谢谢!

4

3 回答 3

13

基于您提供的标记的快速想法。

var $div = $('div.test.className:contains(content)');

if ($div.length > 1) {
   $div.not(':last').remove()
}

但我会首先防止重复。

编辑:这是另一种使用filterandslice方法:

$('.test.className').filter(function() {
    return this.textContent === 'content';
}).slice(0, -1).remove();

在上面的代码片段中,-1作为方法的第二个参数,.slice集合中的最后一个元素被忽略。

于 2012-12-09T20:06:14.700 回答
7

像这样的东西:

​$('.className').not(':last')​.remove();​​​​​​​​​​​​​

用 选择所有 div .className,从选择中删除最后一个,删除 div 集合,您将只保留最后一个。

演示:http: //jsfiddle.net/j5728/

于 2012-12-09T20:02:48.850 回答
1

原件(见下面的编辑)

正如Jan Dvorak所问的那样,我不确定您认为哪些属性可以确定一个元素是另一个元素的重复,但是,对于您的问题,以下不是特别快速但更通用的解决方案:

(function($) {
  $.fn.removeDuplicates = function() {
    var original = [];

    this.each(function() {
      var el = this, $el, isDuplicate;

      $.each(original, function() {
        $el = $(el);

        // check whichever properties 
        // you believe determine whether 
        // it's a duplicate or not
        if (el.tagName === this.tagName && 
            el.className === this.className && 
            el.id === this.id && 
            el.value === this.value && 
            el.href === this.href && 
            $el.html() === $(this).html()) {
          isDuplicate = true;
          $el.remove();
        }
      });

      if (!isDuplicate) {
        original.push(el);
      }
    });
  };
}(jQuery));

你会像这样使用它:

$('.test').removeDuplicates();

// .. or even
$('div').removeDuplicates();

// .. or even
$('.test.className').removeDuplicates();

以上所有内容都应按预期工作,如此处所示

编辑

自从我写这篇文章以来已经有几年了,我已经了解了Node.isEqualNode。它提供了一种更简洁的方式来执行此操作,因此更新后的插件将如下所示(并将返回原始元素以进行链接):

(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));

这里演示了一个工作示例。

于 2012-12-09T21:26:57.190 回答