我们如何在jquery中检查来自两个循环的匹配数据?

时间:2016-12-06 14:57:32

标签: jquery

我的功能有两个循环。一个是forloop,另一个是$ .each()。我需要比较两个循环,如果有匹配数据复选框显示为selected =“selected”。请检查我的代码并纠正我。

var cssClassRel      = event.other.cssClass; //class-7b,class-7c,class-10c etc 
var cssClassRelSplit = cssClassRel.split(" ");
var cssFor = [];
var cssEach = [];
for(var i=0; i<cssClassRelSplit.length; i++){
  cssFor = cssClassRelSplit[i]
}
$('div.saveFilter').find('input:checkbox').each(function () {
   cssEach = $(this).attr('rel') ////class-7b,class-7c,class-10c,class-10d,class-12c etc
   if(cssFor == cssEach){
     $(this).prop('checked', true);
   } 
   else{
     $(this).prop('checked', false);
   }
});

HTML

<div class="p-t-15 saveFilter">
     <div class="col-sm-3">
        <label class="labeling"><input type="checkbox" rel="class-7b" class="cssData" checked=""/> 7b</label>
      </div>
     <div class="col-sm-3">
        <label class="labeling"><input type="checkbox" rel="class-7c" class="cssData" checked=""/> 7c</label>
     </div>
     <div class="col-sm-3">
         <label class="labeling"><input type="checkbox" rel="class-10c" class="cssData" checked=""/> 10c</label>
     </div>
     .....
     .....
     .....
</div>

2 个答案:

答案 0 :(得分:0)

像朱利安那样使用inArray并与side-note Gone Coding结合使用。

结果如下:https://jsfiddle.net/synz/huqjqxpa/
:)

答案 1 :(得分:0)

prop可以有一个回调函数而不是一个值,split返回一个有自己的indexOf方法的数组。结合这两个,整个集合可以写成:

$('div.saveFilter input:checkbox').prop('checked', function(){return cssClassRelSplit.indexOf($(this).attr('rel')) !== -1;});

基于你的html的完整示例(假设cssClassRel的输入是一个字符串):

var cssClassRel      = 'class-7b class-7c class-10c'
var cssClassRelSplit = cssClassRel.split(" ");

$('div.saveFilter input:checkbox').prop('checked', function(){return cssClassRel.indexOf($(this).attr('rel')) !== -1;});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="p-t-15 saveFilter">
     <div class="col-sm-3">
        <label class="labeling"><input type="checkbox" rel="class-7b" class="cssData" checked=""/> 7b</label>
      </div>
     <div class="col-sm-3">
        <label class="labeling"><input type="checkbox" rel="class-7c" class="cssData" checked=""/> 7c</label>
     </div>
     <div class="col-sm-3">
         <label class="labeling"><input type="checkbox" rel="class-10c" class="cssData" checked=""/> 10c</label>
     </div>   
     <div class="col-sm-3">
         <label class="labeling"><input type="checkbox" rel="NotInArray" class="cssData" checked=""/> Not in array</label>
     </div>   
</div>