CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Paul Richter
Paul Richter

Reputation: 11072

Strange behaviour with jQuery pseudo selector :visible

I have a query that looked like this:

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

which would attempt, in theory, to find that <select> tag inside of the currently visible div.modal element.

Unfortunately, it would return nothing at all, despite the DOM looking exactly as you would expect (<div class="modal">...<select id="DTE_Field_calculator.type">...)

If I removed the :visible (div.modal ...) filter, it successfully finds the target select tag.

If I remove the .modal (div:visible ...) class selector, it will again successfully find the correct select tag.

But when used in combination, I receive an empty array.

The only way I am able to solve the problem was to implement the performance tip on the :visible documentation page, and change the selector like so:

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

This is sufficient, and of course more performant, but I am a little confused why the selector would not work in the first place. I see no reason why it should behave in the manner I observed.

Does anyone know why the :visible filter selector, in combination with the .modal class selector, would somehow cause the entire selection to fail? Am I missing something obvious?

Upvotes: 1

Views: 81

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

To explain this 'bug', i guess you are using invalid HTML markup, using duplicate IDs.

To explain why one method fails while the second works, be aware, ID selector returns only first matched element.

This $("div.modal:visible select#DTE_Field_calculator\\.type") is read from right to left, matching first element with ID and then check if parent .modal is visible.

This $("div.modal").filter(":visible").find("select#DTE_Field_calculator\\.type") is searching for all elements with class modal, filtering the visible ones, then looking for element with ID DTE_Field_calculator.type.

That would explain it. So solution is to use CLASS, not ID.

Upvotes: 1

Related Questions