javascript - Strange behaviour with jQuery pseudo selector :visible -

i have query looked this:

$("div.modal:visible select#dte_field_calculator\\.type") 

which attempt, in theory, find <select> tag inside of visible div.modal element.

unfortunately, return nothing @ all, despite dom looking expect (<div class="modal">...<select id="dte_field_calculator.type">...)

if removed :visible (div.modal ...) filter, finds target select tag.

if remove .modal (div:visible ...) class selector, again find correct select tag.

but when used in combination, receive empty array.

the way able solve problem implement performance tip on :visible documentation page, , change selector so:

$("div.modal").filter(":visible").find("select#dte_field_calculator\\.type") 

this sufficient, , of course more performant, little confused why selector not work in first place. see no reason why should behave in manner observed.

does know why :visible filter selector, in combination .modal class selector, somehow cause entire selection fail? missing obvious?

to explain 'bug', guess using invalid html markup, using duplicate ids.

to explain why 1 method fails while second works, aware, id selector returns first matched element.

this $("div.modal:visible select#dte_field_calculator\\.type") read right left, matching first element id , check if parent .modal visible.

this $("div.modal").filter(":visible").find("select#dte_field_calculator\\.type") searching elements class modal, filtering visible ones, looking element id dte_field_calculator.type.

that explain it. solution use class, not id.