检查是否有n个元素包含数据属性设置为真

Question

我有一个网站，其中有五个复选框，一个div包含另一个div，每个div包含五个输入隐藏值为1或empty。该值来自数据库。

这是一个例子，表示具有的div在div容器：

<input checkbox value="a"> 
<input checkbox value="b"> 
<input checkbox value="c"> 
<input checkbox value="d"> 
<input checkbox value="e"> 
<div class="container"> 
    <div class="content" data-name="combine"> 
     <input type="hidden" value="" data-name="a" /> 
     <input type="hidden" value="" data-name="b" /> 
     <input type="hidden" value="" data-name="c" /> 
     <input type="hidden" value="" data-name="d" /> 
     <input type="hidden" value="" data-name="e" /> 
    </div> 

    <div class="content" data-name="combine"> 
     <input type="hidden" value="1" data-name="a" /> 
     <input type="hidden" value="" data-name="b" /> 
     <input type="hidden" value="" data-name="c" /> 
     <input type="hidden" value="1" data-name="d" /> 
     <input type="hidden" value="" data-name="e" /> 
    </div> 
</div> 

在javascript代码我有此片段：

if(elementLength > 0) { 

    $("[data-name='combine'] div.tagsProds").each(function() { 

     var element = $(this); 

     $.each(enabledChecks,function(i, v) { 

      if(element.find("input[name='"+v+"']").val() == "") { 
       element.append("<div class='blocked'></div>"); 
       element.unbind("click"); 
       element.addClass("js_noSortable"); 
      } 

     }); 

    }); 

} 

的javascript首先检查div.container有孩子的，并且如果它有孩子代码迭代每个孩子。对每个孩子我迭代五个复选框（enabledChecks），我看看隐藏的输入是否为空。我需要什么，如果这五个输入是空的，那么附加`div.blocked'。

Answer 1

由于我没有足够的声望写评论，我写了一个答案。

首先，我认为你的答案是相当有趣的，如果你正在寻找一种方法使用jQuery函数，但因为我不知道任何函数来做到这一点，我认为你可以创建一个array()，当你检查输入是否有空值将其推入阵列，当循环完成时，检查array()的length，如果它与您的复选框的数量匹配，然后附加.blocked

Answer 2

如果我正确地理解了这个问题，您希望找到与某个选择器匹配的div，该选择器没有包含非空值的子元素input。该.filter方法似乎是一个不错的选择在这里：

$("[data-name='"+name+"'] div.tagsProds") 
    .filter(function() { 
     // assert that at least one child input has a value 
     var $inputsWithValue = $(this).find("input[name='avail_" + v + "'][value!='']"); 
     return $inputsWithValue.length === 0; 
    }) 
    .each(function() { 
     // now act on those value-less divs 
     $(this) 
      .append("<div class='blocked'></div>") 
      .addClass("js_noSortable") 
      .unbind("click"); 
    }); 

另一只选择选项可能看起来像：

$("[data-name='"+name+"'] div.tagsProds:not(:has(input[name='avail_" + v + "'][value!='']))") 
    .each(function() { 
     // now act on those value-less divs 
     $(this) 
      .append("<div class='blocked'></div>") 
      .addClass("js_noSortable") 
      .unbind("click"); 
    }); 

的jsfiddle：http://jsfiddle.net/nrabinowitz/vrx2wk8g/

注意，上面的例子遵循选择在示例代码，但不会对您的示例标记起作用。