Question

这非常奇怪......我试图为某些表单创建验证函数，但我似乎无法对JQuery给出的数组中的元素运行任何JQuery。

当它到达.css行时会中断。我在.val（）和sceond .css上遇到了类似的问题。 Whaaaaat？

function isRequiredFilled(prepend){
    var reqs = $(prepend + ' .required');
    var filled = true;
    for(var i=0; i<reqs.length; i++){
        reqs[i].css("background-color", "white");
        if(!reqs[i].val()){
            reqs[i].css("background-color", "rgba(200, 0, 0, 0.7f");
            filled = false;
        }
    }
    return filled;
}

Answer 1

jQuery对象是一个类似于数组的对象。数组内部是本机DOM元素。尝试将每个迭代值包装在另一个jQuery选择器中以访问jQuery方法，如下所示：

function isRequiredFilled(prepend){
    var reqs = $(prepend + ' .required');
    var filled = true;
    for(var i=0; i<reqs.length; i++){
        var $req = $(reqs[i]);
         $req.css("background-color", "white");
        if(! $req.val()){
             $req.css("background-color", "rgba(200, 0, 0, 0.7f");
            filled = false;
        }
    }
    return filled;
}

Answer 2

为什么您的代码无法正常工作，如其他答案中所述。这是一个更jQuery-ish的解决方案：

function isRequiredFilled(prepend){
    var reqs = $(prepend + ' .required').css("background-color", "white");
    var empty_reqs = reqs.filter(function() {
        return !this.value;
    }).css("background-color", "rgba(200, 0, 0, 0.7)");

    return empty_reqs.length === 0;
}

Answer 3

在执行reqs[i]时，您获得DOM元素，而不是jQuery对象。您无权访问jQuery方法。使用.eq()：

reqs.eq(i).val();
reqs.eq(i).css();
//Etc.

.eq()

缓存元素也是一个好主意：

var $myEl = reqs.eq(i);

使用类似的东西：

function isRequiredFilled(prepend){
    var reqs = $(prepend + ' .required');
    var filled = true;
    for(var i=0; i<reqs.length; i++){
        var $currentReq = reqs.eq(i)
        $currentReq.css("background-color", "white");
        if(!$currentReq.val()){
            $currentReq.css("background-color", "rgba(200, 0, 0, 0.7f)");
            filled = false;
        }
    }
    return filled;
}

Answer 4

使用each怎么样？ https://api.jquery.com/each/

function isRequiredFilled(prepend){
  var reqs = $(prepend + ' .required');
  var filled = true;
  reqs.each(function (i, req) {
    req.css("background-color", "white");
    if (!req.val()){
        req.css("background-color", "rgba(200, 0, 0, 0.7f)");
        filled = false;
    }
  });
  return filled;
}

还添加了遗失)。

Answer 5

以上评论是正确的 - reqs[i]会给你DOM元素，但由于你想在元素上调用jQuery方法val()和css()，你真正想要的是 jQuery对象 引用那个DOM元素。

用以下内容替换您的功能：

function isRequiredFilled(prepend){

    // Added $ to variable name as per jQuery coding convention
    var $reqs = $(prepend + ' .required');

    var filled = true;

    for (var i = 0; i < reqs.length; i++) {

        // jQuery object that references your desired DOM node
        var $el = $reqs.eq(i); 

        // do stuff with the $el variable
        $el.css("background-color", "white");
        if (!$el.val()) {
            $el.css("background-color", "rgba(200, 0, 0, 0.7f");
            filled = false;
        }
    }
    return filled;
}

JQuery获取一系列元素并更改其CSS

5 个答案: