How to select multiple different CSS selectors with same base condition

Question

I am trying to select some elements on my page based on some conditions... and these all have some common parents as follow:

$("[id*=wizard_person]:not(.hidden) select.required, [id*=wizard_person]:not(.hidden) input.required:not(.tt-hint)").each ->
    ...

Here, I'm selecting both input.required:not(.tt-hint) and select.required that are present in [id*=wizard_person]:not(.hidden).

However, I'm writing [id*=wizard_person]:not(.hidden) twice, to handle both scenarios.

Is there a way I can DRY this up? if yes, How? thanks.

can you try like this $("select.required,input.required:not(.tt-hint) , [id*=wizard_person]:not(.hidden)") — guradio
– guradio, Commented Sep 7, 2016 at 3:36
Why would you want to target [id*=wizard_person]:not(.hidden)? The OP is trying to target specific input and select descendants — Capsule
– Capsule, Commented Sep 7, 2016 at 3:49

Capsule · Accepted Answer · 2016-09-07 03:48:21Z

1

I would start from [id*=wizard_person]:not(.hidden) and then find the correct descendants:

$("[id*=wizard_person]:not(.hidden)").find("select.required, input.required:not(.tt-hint)").each(...)

If your selects and inputs are direct children, you could even use children() instead of find()

answered Sep 7, 2016 at 3:48

Capsule

6,1531 gold badge24 silver badges28 bronze badges

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

1 Comment

awesomely neat and precise, what I wanted.