1

I think the code is pretty self-explanatory :

 elements = $("input.newEntry:not([name^='counter'])");
    for (e in elements) {
        if (e.css('background-color') == 'rgba(255, 0, 0, 0.6)')
            alert("fire event");
    }

the error i get is e.css() is not a function. can i somehow cast e to a DOM object?

or is there any workaround for what i want to do?

1
  • Btw, DOM objects don't have a css method. Commented Feb 21, 2012 at 11:48

5 Answers 5

4
elements = $("input.newEntry:not([name^='counter'])");

elements.each(function()
{
    if ($(this).css('background-color') == 'rgba(255, 0, 0, 0.6)')
        alert("fire event");
});

On a side note, I don't think comparing to background-color like that is a good idea. Can't you use a class?

Sign up to request clarification or add additional context in comments.

4 Comments

+1 for the class suggestion. CSS should not appear in your Javascript code. Use classes. Consider what happens if you change 0.6 to 0.7 in your CSS. You have to change your Javascript also... Use classes and the hasClass() jQuery method.
i have a big form, whose fields are being tested on change in many ways, turning the input bg color to green if it's valid. I think it's actually the simplest way to check the validity of the form before it's submitted.
@SpyrosMandekis You are shooting yourself in the foot. One small change, and you have to change a lot of things. At least add a class to the validated fields (jQuery: .addClass('valid')) and check for the existence of that. In your CSS, you can style the valid class to have a nice green background.
but you are actually right, i'll probably use .addClass to work it around
4

elements is a jQuery collection (returned by the $ function), so better treat it with the functions that jQuery itself provides to you. For example, if you want to iterate on a jQuery collection, use .each().

elements = $("input.newEntry:not([name^='counter'])");
elements.each(function (i, e) {
    if ($(e).css('background-color') == 'rgba(255, 0, 0, 0.6)')
        alert("fire event");
    }
});

Also, in an each(), this will always refer to the current element, so you can even do this:

elements.each(function () {
    if ($(this).css('background-color') ...
});

1 Comment

e is not a jQuery object, but a DOM element. Use $(e).css().
1

Do not iterate lists like that.

Use:

for(var i = 0; i < elements.length; i++) {
    var e = elements[i];
    ...
}

(or $.each as James suggests)

Your current for will not only yield all items in the array, but all members of the entire object, which will include jQuery functions such as click, is, etc., which do not have a css function.

Comments

1

Use jQuery.each:

elements = $("input.newEntry:not([name^='counter'])");
elements.each(function (index, element) {
    var e = $(element);
    if (e.css('background-color') == 'rgba(255, 0, 0, 0.6)')
        alert("fire event");
});

elements is a jQuery object. If you loop through it, you also get the functions and properties of that object, not just the indices of the elements.

Comments

0
$("input.newEntry:not([name^='counter'])").each(function() {
   if ($(this).css('background-color') === 'rgba(255, 0, 0, 0.6)') {;
       alert("fire event");
   }
});

http://api.jquery.com/each/

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.