JQuery获取元素数组并更改其CSS

JQuery getting an array of elements and changing their CSS

本文关键字：CSS 获取 元素 数组 JQuery      更新时间：2023-09-26

这太奇怪了。。。我试图为一些表单创建一个验证函数，但我似乎无法对JQuery提供的数组中的元素运行任何JQuery

当它到达.css行时就会中断。我在.val((和sceond.css.Waaaaat上也有类似的问题？

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;
}

为什么您的代码不能像其他答案中解释的那样工作。这里有一个更具jQuery风格的解决方案：

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;
}
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;
}
执行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;
}

使用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;
}

还添加了一个缺失的)。

以上注释是正确的——reqs[i]将为您提供DOM元素，但由于您想在元素上调用jQuery方法val()和css()，因此您真正想要的是引用该DOM元素的jQuery对象。

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

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;
}
相关文章：