jQuery selector : selecting ancestor whose descendent has attribute set to value

Question

Struggling with CSS selector. Want to select all FORM elements that are ancestors of {elements having class='required'}. Any ideas?

Answer 1

$(".required").parents("form").each(function(){
    $(this) ///... do something
});

something like this ?

Answer 2

You can use .closest() to get the nearest ancestor matching the selector, like this:

$(".required").closest("form")

or, alternatively you can use :has(), like this:

$("form:has(.required)")

This translates to: <form> elements that contain an element with class="required", same result (since forms can't be nested), just coming from the opposite direction.

Answer 3

To select all ancestor form elements at any level would be:

$(".required form")

CSS:

.required form { }