检查重复的输入组合

时间:2017-04-18 13:18:18

标签: javascript jquery html

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

HTML fiddle

5 个答案:

答案 0 :(得分:1)

&#13;
&#13;
    $(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;
&#13;
&#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');其中contentdiv个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中删除评论。

阅读此问题:Remove HTML comments with Regex, in Javascript