jQuery删除带有类名的重复div

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

content
content
content
..
content

而我正试图删除重复的div并保留最后一个! 任何快速的想法? 谢谢!

根据您提供的标记快速构思

 var $div = $('div.test.className:contains(content)'); if ($div.length > 1) { $div.not(':last').remove() } 

但我会在第一时间防止重复。

编辑 :这是另一种使用filterslice方法的替代方法:

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

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

像这样的东西:

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

.className选择所有div,从选择中删除最后一个div,删除div的集合,然后你将保留最后一个。

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

原始(见下面的编辑)

正如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)); 

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