<div> <!--first combination-->
<input type="text" name="color[]" value="red" />
<input type="text" name="size[]" value="small" />
<input type="text" name="kind[]" value="plastic" />
</div>
<div> <!--second combination-->
<input type="text" name="color[]" value="red" />
<input type="text" name="size[]" value="big" />
<input type="text" name="kind[]" value="plastic" />
</div>
<div> <!--third combination-->
<input type="text" name="color[]" value="red" />
<input type="text" name="size[]" value="small" />
<input type="text" name="kind[]" value="plastic" />
</div>
<!--other combination might be here-->
在我的HTML输入值中,注意到第一个和第三个组合完全相同,如何在jQuery
中实现此目的,以便检查是否存在重复组合?
Samle代码仅用于检查单个重复输入
$('input').each(function () {
var $duplicate = $('input[value=' + $(this).val() + ']');
console.log($duplicate.length > 1);
});
答案 0 :(得分:1)
$(function(){
var child = [], duplicate_count=0;
$("div").each(function(){
child.push($(this).children());
});
for(var i=1; i<child.length; i++)
{
for(var k=0; k<child[i].length;k++){
if(child[0][k].name == child[i][k].name)
{
duplicate_count++;
break;
}
}
}
console.log(duplicate_count);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> <!--first combination-->
<input type="text" name="color[]" value="red" />
<input type="text" name="size[]" value="small" />
<input type="text" name="kind[]" value="plastic" />
</div>
<div> <!--second combination-->
<input type="text" name="color[]" value="red" />
<input type="text" name="size[]" value="big" />
<input type="text" name="kind[]" value="plastic" />
</div>
<div> <!--third combination-->
<input type="text" name="color[]" value="red" />
<input type="text" name="size[]" value="small" />
<input type="text" name="kind[]" value="plastic" />
</div>
&#13;
答案 1 :(得分:1)
我假设您的所有div都在<body>
标记内。
<script>
function checkDivDuplicate(){
var divArray = []; //array that will hold all the div
var sortedDivArray = []; // array that will hold the div in sorted manner of their content
var divCollection = $('body').find('div'); //get all the div, 3 div as of now
//use another selector if your div are not inside <body>
divCollection.each(function(){
divArray.push($(this).html().toString().replace(/ /g,''));
});
//added each div content as a string in an array so that we can compare div content as a string without spaces
sortedDivArray = divArray.slice().sort();
//the div contents are sorted so that we can compare them with less complexity
var duplicateDiv = []; //array that will hold all the duplicate div contents
for (var i = 0; i < divArray.length - 1; i++) {
if (sortedDivArray[i + 1] == sortedDivArray[i]) {
duplicateDiv.push(sortedDivArray[i]);
}
}
console.log(duplicateDiv);
//you will see the duplicate div content here
}
</script>
正如您所看到的,div
是否位于另一个HTML元素中,<div id='content'></div>
然后只需替换它,
var divCollection = $('body').find('div');
有了这个
var divCollection = $('#content').find('div');
其中content
是div
个ID。这是工作JSFiddle JSFIDDLE
答案 2 :(得分:1)
尝试以下代码
jQuery的:
var items = new Array();
getItemsArr();
$(document).keyup(function(){
getItemsArr();
});
function getItemsArr(){
$("div").each(function(i){
items[i] = new Array();
$(this).find(':input').each(function(j){
items[i][j] = $(this).val();
});
});
findDuplicateCombination(items);
}
function findDuplicateCombination(arr) {
var uniques = [];
var itemsFound = {};
for(var i = 0, l = arr.length; i < l; i++) {
var stringified = JSON.stringify(arr[i]);
if(itemsFound[stringified]) {
console.log("duplicate combination detected at combination : " +([i+1]));
alert("duplicate combination detected at combination : " +([i+1]));
continue; }
uniques.push(arr[i]);
itemsFound[stringified] = true;
}
return uniques;
}
这是工作的jsfiddle:https://jsfiddle.net/v2djzj28/8/
我认为应该可以帮到你
答案 3 :(得分:1)
这绝不是优化或完美,而只是快速了解如何解决问题。基本上,每次div中的输入都会进行迭代,将每一行与其他行进行比较。
如果你有很多行,这可能会非常昂贵,你应该考虑使用更精确的东西。
我将值合并到一个字符串中以便于比较,这可能不适用于所有数据类型。
所有重复的行(即使是第一个实例)都通过给它一个css类着色为红色。
jQuery(function() {
var allDivs = jQuery('div');
jQuery.each(allDivs ,function(i,v) {
var outerValues = getValues(v);
jQuery.each(allDivs, function(ind,val) {
if(i !== ind) {
var innerValues = getValues(val);
if(innerValues === outerValues) {
jQuery(val).addClass('dupe');
}
}
});
});
});
function getValues(elem) {
var valueElems = jQuery(elem).find('input');
var result = '';
jQuery.each(valueElems, function(i,v) {
result += v.value;
});
return result;
}
.dupe input {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> <!--first combination-->
<input type="text" name="color[]" value="red" />
<input type="text" name="size[]" value="small" />
<input type="text" name="kind[]" value="plastic" />
</div>
<div> <!--second combination-->
<input type="text" name="color[]" value="red" />
<input type="text" name="size[]" value="big" />
<input type="text" name="kind[]" value="plastic" />
</div>
<div> <!--third combination-->
<input type="text" name="color[]" value="red" />
<input type="text" name="size[]" value="small" />
<input type="text" name="kind[]" value="plastic" />
</div>
答案 4 :(得分:1)
试试这个,但要小心,空格和断线。
let divs = [];
$('#all div').each(function () {
if(divs.indexOf($(this).html()) < 0){
divs.push($(this).html());
}
});
$("#all").html(divs.join("<br/>"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="all">
<!--first combination-->
<div>
<input type="text" name="color[]" value="red" />
<input type="text" name="size[]" value="small" />
<input type="text" name="kind[]" value="plastic" />
</div>
<!--second combination-->
<div>
<input type="text" name="color[]" value="red" />
<input type="text" name="size[]" value="big" />
<input type="text" name="kind[]" value="plastic" />
</div>
<!--third combination-->
<div>
<input type="text" name="color[]" value="red" />
<input type="text" name="size[]" value="small" />
<input type="text" name="kind[]" value="plastic" />
</div>
</div>
如果您的重复HTML有不同的评论,例如<!-- one -->
,<!-- two -->
..等,那么您可以使用Regex
从HTML中删除评论。