Thank you for the explanation and the suggestion, but elements are
already (potentially) sporting multiple classes, due to multiple types
of validation occurring on the fields.
Oversimplified pseudo-psuedocode example:
//
// begin code
//
if (requiredField && $.trim(requiredField.val()).length == 0) {
requiredField.addClass('requiredFail');
isValid = false;
}
if (emailField
&& emailField.val().length > 0
&& !emailField.val().test(emailregex)) {
emailField.addClass('validationFail');
isValid = false;
}
if (!isValid) {
//here's where we break down...
var $firstFail = $
('.requiredFail,.validationFail').filter(':first');
var elemOffset = $firstFail.offset().top;
$('html,body').animate({scrollTop: elemOffset}, 400);
}
//
// end code
//
There are fields that are required, and we check them for content.
There are also fields that, if provided, must be valid content. A few
fields fall into both categories.
I am using CSS classes to distinguish between the two to make it easy
for the designer to add new fields--just give them the "required"
class. If it's an email field, put "email" somewhere in its ID
attribute. Both cases get picked up, but I'm unable to get the page
to scroll to the FIRST item that matches EITHER validation failure
class (requiredFail or validationFail).
> Your issue doesn't actually have anything to do with the filter, it's
> the selection. $('.class1,.class2') selects all class1, then all
> class2.
This totally explains why I have the issue, and I thank you for
describing it. I expected the select element statement to behave
something like, "className ~= /^(?:class1|class2)$/," but it really
operates more like, "(.class1).push(.class2)."
Pyro
On Nov 5, 1:45 pm, "Erik Beeson" <[EMAIL PROTECTED]> wrote:
> Your issue doesn't actually have anything to do with the filter, it's
> the selection. $('.class1,.class2') selects all class1, then all
> class2. So even if class2 appears before class1, class one will still
> get selected first (since you specified it first in the selector), and
> your filter will return it.
>
> I suggest you apply the same class to all elements that you want to
> select from. If nothing else, you could do:
>
> $('.class1,.class2').addClass('class1_or_class2');
> $('.class1_or_class2').filter(':first')...;
>
> And that second line could be simplified to:
> $('.class1_or_class2:first')...;
>
> Hope it helps.
>
> --Erik
>
> On 11/5/07, Pyrolupus <[EMAIL PROTECTED]> wrote:
>
>
>
> > Basically, what I want to do is find the first element that matches
> > either class1 OR class2. However, using the syntax from the subject
> > line:
>
> > var $jqElem = $('.class1,.class2').filter(':first');
>
> > $jqElem is always the first element that has class1 (i.e., the first
> > class specified), rather than the first element for the whole
> > selector. E.g., using the above on the following:
>
> > <input type="text" id="elem1" class="class2" />
> > <input type="text" id="elem2" class="class1" />
>
> > it is getting "elem2."
>
> > Am I using the wrong syntax? I also tried $
> > ('.class1').add('.class2').filter(':first'), but I get the same
> > result.
>
> > Thanks,
> > Pyro
