JQuery getting an array of elements and changing their CSS

Question

This is super weird... I'm trying to make a validation function for some forms but I can't seem to run any JQuery on the elements in the array JQuery gives me.

This breaks when it hits the .css line. I have similar problems on the .val() and the 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;
}

score 2 · Answer 1 · edited Apr 29 '14 at 19:42

A jQuery object is an array-like object. Inside the array are the native DOM elements. Try wrapping each iterated value inside another jQuery selector to have access to the jQuery methods, like so:

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

Felix Kling · Accepted Answer · 2014-04-29T20:01:54.240

2

Why your code doesn't work as already been explained in the other answers. Here is a more jQuery-ish solution:

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

edited Apr 29 '14 at 20:01

answered Apr 29 '14 at 19:46

Felix Kling

795,719
175
1,089
1,143

Karl-André Gagnon · Answer 3 · 2014-04-29T19:46:10.720

when doing reqs[i], you get the DOM element, not the jQuery object. You don't have access to jQuery method. Use .eq() :

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

.eq()

Caching the element would be a good idea aswell :

var $myEl = reqs.eq(i);

Use something like this :

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

score 0 · Answer 4 · answered Apr 29 '14 at 19:47

What about using 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;
}

Also added a missing ).

unruthless · Answer 5 · 2014-04-29T20:15:32.673

0

The above comments are correct -- reqs[i] will give you the DOM element, but since you want to call jQuery methods val() and css() on the element, what you really want is the jQuery object that references that DOM element.

Replace your function with the following:

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

edited Apr 29 '14 at 20:15

answered Apr 29 '14 at 19:51

unruthless

507
5
8

`var $el = {};` is unnecessary. Why not just `var $el;` or even just declare the variable in the loop `var $el = $reqs.eq(i);`? – Felix Kling Apr 29 '14 at 20:03
Good questions. (1) var $el = {}; guards against the possibility of calling a jQuery method on something that is not an object and therefore generating an exception. However, in this case, the for loop won't run if $reqs.length() === 0, so you're right that var $el; is sufficient. (2) I declare variables outside of loops because of some misremembered advice about performance, but as per http://stackoverflow.com/questions/3684923/javascript-variables-declare-outside-or-inside-loop, it doesn't seem to matter! Updating the function now. Thanks! – unruthless Apr 29 '14 at 20:12
Assigning an empty object wouldn't help much though. E.g. if `$el.css()` is called, and `$el.css` is `undefined` (which it would be since `$el` is an empty object), then it would still throw an error, since `undefined` is not a function. – Felix Kling Apr 29 '14 at 20:15

JQuery getting an array of elements and changing their CSS

5 Answers5