CODEWITHSUNDEEP
javascriptjqueryhtmlcss
2778
2778

Reputation: 864

JQuery getting an array of elements and changing their CSS

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

Upvotes: 0

Views: 1881

Answers (5)

unruthless
unruthless

Reputation: 517

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

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 817030

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

Upvotes: 2

sebnukem
sebnukem

Reputation: 8333

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 ).

Upvotes: 0

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

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.

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

Upvotes: 0

Moeri
Moeri

Reputation: 9304

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

Upvotes: 2

Related Questions