檢查是否有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/

注意，上面的例子遵循選擇在示例代碼，但不會對您的示例標記起作用。