【问题标题】:Check if all elements satisfy a condition检查所有元素是否满足条件
【发布时间】:2013-03-06 10:12:54
【问题描述】:

我需要一个 jQuery filter/map/each 类型函数来检查所有元素是否满足条件:

function areAllValid(inputs){
     return $.someFunction(inputs, function(input) { return input.length > 0; }); 
}

如果所有输入的长度 > 0 someFunction 应该返回 true。 jQuery中有这样的东西吗?

【问题讨论】:

  • 我不认为 jQuery 有这个。 Underscore.js 有$.every()。使用$.filter在jQuery中实现应该很简单。
  • 注意,如果您能找到一种方法将您的条件描述为选择器,那么您可以检查集合中的项目数inputs.remove('[value=...]').length == 0 类似于“值非空选择器”的内容:stackoverflow.com/questions/10641258/…
  • @Barmar,every() 正是我所需要的,巧合的是,已经将下划线作为依赖项:)。谢谢

标签: jquery


【解决方案1】:
function areAllValid(inputs){
     return Array.prototype.every.call(inputs, function(input) { return input.length > 0; }); 
}

【讨论】:

    【解决方案2】:

    快速的小 jQuery:

    $(document).ready(function() {
      $('form input').keyUp(function() {
        var allValid = true;
        $.each($('form input'), function(input) { 
          allValid = input.val().length > 0 
        }
        if ( allValid )
          ...
        else
          ...
      })
    });
    

    【讨论】:

      【解决方案3】:

      现有的答案没有解决一些小的优化问题,所以我会用我认为是最易读/性能最好的代码。

      添加一个像这样会短路的jQuery扩展方法:

      /** 
      * Determines whether all elements of a sequence satisfy a condition.
      * @@param  {function} predicate - A function to test each element for a condition.
      * @@return {boolean}  true if every element of the source sequence passes the test in the specified predicate
      */
      $.fn.all = function (predicate) {
          $(this).each(function (i, el) {
              if (!predicate.call(this, i, el)) return false;
          });
          // we made it this far, we're good.
          return true;
      };
      

      然后这样称呼它:

      var allValid = $("form :input").all(function () {
                         return $(this).valid();
                      });
      

      【讨论】:

        【解决方案4】:

        您不需要使用 jQuery 来执行此操作。您可以使用 IE 9+ 支持的 Array.prototype.every 在本机 JavaScript 中执行此操作。

        function areAllValid(inputs){
             return inputs.every(function(input) { return input.length > 0; }); 
        }
        

        如果您使用的是 EcmaScript 2015,您可以进一步整理:

        var areAllValid = inputs => inputs.every(input => input.length > 0);
        

        【讨论】:

          【解决方案5】:

          我通常使用以下形式在 JQuery 中获取匹配项

          $.map($("[some selector]"), function(e) {
            return ([some matching mechanism]);
          }).indexOf(false) == -1;
          

          在您的具体情况下,它看起来像这样:

          $.map(inputs, function(e) {
            return (e.length > 0);
          }).indexOf(false) == -1;

          希望这可以为您节省一些时间。

          【讨论】:

          • 我觉得你也可以用inputs.map(function...
          【解决方案6】:

          不完全是,但很容易创建一个:

              $.eachCondition = function (obj, conditionFunction){
                  var trueCount=0;
                  var falseCount=0;
          
                  $.each(obj, function (i,v) {
                    if (conditionFunction.call(this,i,v)) {
                      trueCount++;
                    }
                    else {
                      falseCount++;
                    }
                    });
                    if (falseCount===0) {
                      return true;
                    }
                    if (trueCount===0) {
                      return false;
                    }
                    return undefined;
                };
                $.fn.eachCondition = function (conditionFunction) {
                  return $.eachCondition(this, conditionFunction);
                };
          

          这里是工作测试:http://jsbin.com/iwanof/2/

          【讨论】:

            【解决方案7】:

            这将遍历每个项目,并将条件与前一个结果相结合,因此只有当所有项目的条件都为真时,它才会返回真。您当然可以用回调函数替换条件,并使用 inputs.each( 而不是 $('input') 但您可能需要根据输入是否为 jquery 对象来稍微调整代码。

            var all = true;
              $('input').each( function(index, value) { 
                all = all & ($(value).val().length > 0);
              });
            return all;
            

            【讨论】:

              【解决方案8】:

              答案是肯定的,它有一个方法 grep 可以满足你的要求。例如:

              inputs= jQuery.grep(inputs, function(input){
              return input.length>0;
              });
              if(inputs.length>0) return true;
              return false;
              

              我没有测试它,也许它有小问题但应该差不多这样。

              【讨论】:

              • 从文档看起来这可行,但我也没有测试。我最终选择了 Underscore.every(),因为无论如何我已经将它作为依赖项,它完全适合填充,返回一个布尔值。
              • 这样做的问题是,如果你的数千个元素中的第二个不满足要求,它仍然会检查所有后续元素,而不是打破循环并返回false。但它有效。
              猜你喜欢
              • 1970-01-01
              • 2017-06-20
              • 1970-01-01
              • 1970-01-01
              • 2021-12-07
              • 1970-01-01
              • 2012-10-01
              • 1970-01-01
              • 2021-06-07
              相关资源
              最近更新 更多